'How can i adjust the height on this part? HTML

Hello I'm completely new to HTML and I was trying to make a little project for myself so that I can learn a little bit more, but I wanted to ask something about how I can change the height of this text I'm trying to make it like Twitter and so that the tweets are separate from the others.

So that the "tweets" are separate like this

<!DOCTYPE html>
<html>

<head>
  <title>My first web page!</title>
  <style>
    img {
      width: 66px;
      border-radius: 50px;
      float: left;
      margin-right: 10px;
    }
    
    .username {
      font-weight: bold;
      margin-top: 30px;
    }
  </style>
</head>

<body>
  <img src="images/reyna.png" />
  <p class="username">@Reyna</p>
  <p>Yeni profil fotom nasıl?</p>

  <img src="images/killjoy.jpg" />
  <p class="username">@Killjoy</p>
  <p>Profil foton çok tatlı!</p>

  <img src="images/reyna.png" />
  <p class="username">@Reyna</p>
  <p>Teşşekür ederim seninkiside öyle!</p>

  <img src="images/reyna.png" />
  <p class="username">@Reyna</p>
  <p>Merhabaa! Jett bu gün çok üzgün :(</p>
</body>

</html>
htmlcss


Solution 1:[1]

    <html>
    <head>
      <title>My first web page!</title>
      <style>
        img {
          width: 66px;
          border-radius: 50px;
          float: left;
          margin-right: 10px;
        }
        
        .chat {
            margin: 100px 0;
        }

        .username {
          font-weight: bold;
          margin-top: 30px;
        }
      </style>
    </head>
    <body>
      <div class="chat">
          <img src="images/reyna.png" />
      <p class="username">@Reyna</p>
      <p>Yeni profil fotom nas?l?</p>
    </div>
    
    <div class="chat">
      <img src="images/killjoy.jpg" />
      <p class="username">@Killjoy</p>
      <p>Profil foton çok tatl?!</p>
  </div>

      <div class="chat">
      <img src="images/reyna.png" />
      <p class="username">@Reyna</p>
      <p>Te??ekür ederim seninkiside öyle!</p>
  </div>

      <div class="chat">
      <img src="images/reyna.png" />
      <p class="username">@Reyna</p>
      <p>Merhabaa! Jett bu gün çok üzgün :(</p>
    </div>
    </body>
  </html> ```

create a div that contain image and text and give some margin or you want the last message to take all the remaining space?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sheng Huang

Related Questions