Làm sao di chuyển box lên trên?

Code của mình :

 <style>
 div{
      font-family: Arial;
    }
    .container{
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 15px;
      padding-right: 15px;
      width: 400px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
      border-radius: 5px;
      margin-top: 20px;
      margin-left: 20px;
    }
    .inbox-label{
      font-size: 14px;
      color: rgb(120, 120, 120);
      margin-bottom: 20px;
    }
    .email{
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 20px;
    }
    .sender-picture-container{
      margin-right: 10px;
    }
    .sender-picture{
      height: 50px;
      width: 50px;
      object-fit: cover;
      border-radius: 25px;
    }
    .email-content{
      flex: 1;
    }
    .email-header{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 3px;
    }
    .sender-name{
      font-size: 16px;
      font-weight: bold;
    }
    .send-time{
      font-size: 14px;
      color: rgb(120, 120, 120);
    }
    .subject{
      font-weight: bold;
      font-size: 14px;
      margin-bottom: 5px;
    }
    .message{
      font-size: 14px;
      color: rgb(120, 120, 120);
    }
  </style>
<div class="container">
    <div class="inbox-label">ALL INBOXES</div>
    <div class="email">
      <div class="sender-picture-container">
        <img class="sender-picture" src="https://cdn.pixabay.com/photo/2023/05/05/11/07/sweet-7972193_1280.jpg">
      </div>
      <div class="email-content">
        <div class="email-header">
          <div class="sender-name">Chewy Promotions</div>
          <div class="send-time">4:58 PM</div>
        </div>
        <div class="subject">
          Biggest sales of the year!
        </div>
        <div class="message">
          Hey there! We're writing to tell you about our...
        </div>
      </div>
    </div>
    <div class="email">
      <div class="sender-picture-container">
        <img class="sender-picture" src="https://cdn.pixabay.com/photo/2021/06/29/15/54/drowning-6374482_1280.jpg">
      </div>
      <div class="email-content">
        <div class="email-header">
          <div class="sender-name">Best Buy</div>
          <div class="send-time">12:32 PM</div>
        </div>
        <div class="subject">Your Best Buy eReceipt</div>
        <div class="message">Thank you for shopping at Best Buy, here is...</div>
      </div>
    </div>
    <div class="email">
      <div class="sender-picture-container">
        <img class="sender-picture" src="https://cdn.pixabay.com/photo/2022/08/27/00/11/plant-7413415_1280.png">
      </div>
      <div class="email-content">
        <div class="email-header">
          <div class="sender-name">Netflix</div>
          <div class="send-time">9:00 AM</div>
        </div>
        <div class="subject"> Here's what's coming soon to Netflix</div>
        <div class="message">Brand new movies and shows, old favorites...</div>
      </div>
    </div>
  </div>
   
  <div class="container">
    <div class="inbox-label">ALL INBOXES</div>
    <div class="email">
      <div class="sender-picture-container">
        <img class="sender-picture" src="https://cdn.pixabay.com/photo/2023/05/05/11/07/sweet-7972193_1280.jpg">
      </div>
      <div class="email-content">
        <div class="email-header">
          <div class="sender-name">Chewy Promotions</div>
          <div class="send-time">4:58 PM</div>
        </div>
        <div class="subject">
          Biggest sales of the year!
        </div>
        <div class="message">
          Hey there! We're writing to tell you about our...
        </div>
      </div>
    </div>
    <div class="email">
      <div class="sender-picture-container">
        <img class="sender-picture" src="https://cdn.pixabay.com/photo/2021/06/29/15/54/drowning-6374482_1280.jpg">
      </div>
      <div class="email-content">
        <div class="email-header">
          <div class="sender-name">Best Buy</div>
          <div class="send-time">12:32 PM</div>
        </div>
        <div class="subject">Your Best Buy eReceipt</div>
        <div class="message">Thank you for shopping at Best Buy, here is...</div>
      </div>
    </div>
    <div class="email">
      <div class="sender-picture-container">
        <img class="sender-picture" src="https://cdn.pixabay.com/photo/2022/08/27/00/11/plant-7413415_1280.png">
      </div>
      <div class="email-content">
        <div class="email-header">
          <div class="sender-name">Netflix</div>
          <div class="send-time">9:00 AM</div>
        </div>
        <div class="subject"> Here's what's coming soon to Netflix</div>
        <div class="message">Brand new movies and shows, old favorites...</div>
      </div>
    </div>
  </div>

b tìm hiểu về flexbox hoặc sử dụng display: inline-block cho 2 div mà bạn cần dàn hàng nhé

1 Like
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?