Với CSS, chuyện gì xảy ra khi có 2 giá trị margin nằm liền kề nhau?

Bài viết được sự cho phép của tác giả Lưu Bình An

Ví dụ với 2 thẻ <p /> nằm liền kề nhau như thế này:

<style>
  p {
    margin-top: 24px;
    margin-bottom: 24px;
  }
</style>

<p>Paragraph One</p>
<p>Paragraph Two</p>

Thay vì 48px, thực tế giữa hai thẻ <p /> chỉ có khoảng cách là 24px

Không rõ vì lý do cá nhân gì, mà CSS chỉ áp dụng cái luật margin collapse này cho giá trị top và bottom, nếu giá trị margin là left hoặc right, thì nó lại bình thường

<style>
  p {
    display: inline-block;
    margin-left: 24px;
    margin-right: 24px;
  }
</style>

<p>P1</p>
<p>P2</p>

Khoảng cách giữa (trái phải) là 48px

Chưa đủ dị, CSS lại còn có quy định chỉ khi 2 element nằm liền kề với nhau mới hiệu nghiệm, nếu có 1 element chèn ở giữa thì lại bình thường 48px

<style>
  p {
    margin-top: 24px;
    margin-bottom: 24px;
  }
</style>

<p>Paragraph One</p>
<br />
<p>Paragraph Two</p>

Và sẽ ra sao nếu 2 element có giá trị margin không bằng nhau. winner take all sẽ được áp dụng, giá trị nào lớn hơn thì chỉ lấy giá trị đó.

<style>
    p {
        margin-bottom: 48px;
    }
    div {
        margin-top: 90px;
    }
</style>

<p>Paragraph One</p>
<div>Paragraph Two</div>

khoảng cách trên dưới sẽ là 90px

margin collapse không chỉ xuất hiện khi có giá trị top và bottom, nó còn xảy ra khi có 2 giá trị top hoặc bottom

<style>
  .parent {
    margin-top: 72px;
  }
  .child {
    margin-top: 24px;
  }
</style>

<div class="parent">
  <p class="child">Paragraph One</p>
</div>

Giá trị margin sẽ chỉ lấy top = 72px

Lời khuyên cuối cùng, nếu thực sự hiểu và nhớ mình đang viết gì thì dùng margin, còn không thì dùng padding cho an toàn.

Bài viết gốc được đăng tải tại vuilaptrinh.com

Có thể bạn quan tâm:

• Business Intelligence (BI) là gì? Trò chuyện cùng chuyên gia Trường Phan để hiểu hơn về vai trò của BI trong hệ thống
• SASS là gì?
• “Chuyện thường ở huyện” tại ZALORA

Xem thêm tuyển dụng it hấp dẫn trên Station D