1. Web
  2. CSS
  3. Guides
  4. Box model
  5. Margin collapsing

Mastering margin collapsing

Margin trên và dưới của các block đôi khi được kết hợp (gộp lại) thành một margin duy nhất có kích thước bằng margin lớn nhất trong số các margin riêng lẻ (hoặc chỉ một trong số chúng nếu chúng bằng nhau), hành vi này được gọi là margin collapsing. Lưu ý rằng margin của các phần tử floating và absolutely positioned không bao giờ collapse.

Margin collapsing xảy ra trong ba trường hợp cơ bản:

Các phần tử anh em liền kề

Margin của các phần tử anh em liền kề được gộp lại (trừ khi phần tử anh em phía sau cần được cleared qua các float).

Không có nội dung ngăn cách giữa phần tử cha và con cháu

Margin dọc giữa block cha và con cháu của nó có thể collapse. Điều này xảy ra khi không có nội dung ngăn cách giữa chúng. Cụ thể, điều này xảy ra trong hai trường hợp chính:

Trong cả hai trường hợp, việc tạo một block formatting context mới trên phần tử cha cũng sẽ ngăn margin của nó collapse với các phần tử con.

Block rỗng

Nếu không có border, padding, nội dung inline, height, hoặc min-height để ngăn cách margin-top với margin-bottom của một block, thì margin trên và dưới của nó sẽ collapse.

Một số điểm cần lưu ý:

  • Margin collapsing phức tạp hơn (của nhiều hơn hai margin) xảy ra khi các trường hợp trên được kết hợp.
  • Các quy tắc này áp dụng ngay cả với margin bằng không, vì vậy margin của phần tử con cháu kết thúc ở bên ngoài phần tử cha của nó (theo các quy tắc trên) bất kể margin của phần tử cha có bằng không hay không.
  • Khi margin âm liên quan, kích thước của margin đã collapse là tổng của margin dương lớn nhất và margin âm nhỏ nhất (âm nhất).
  • Khi tất cả margin đều âm, kích thước của margin đã collapse là margin nhỏ nhất (âm nhất). Điều này áp dụng cho cả phần tử liền kề và phần tử lồng nhau.
  • Margin collapsing chỉ liên quan đến chiều dọc.
  • Margin không collapse trong container có display được đặt thành flex hoặc grid.

Ví dụ

HTML

html
<p>The bottom margin of this paragraph is collapsed …</p>
<p>
  … with the top margin of this paragraph, yielding a margin of
  <code>1.2rem</code> in between.
</p>

<div>
  This parent element contains two paragraphs!
  <p>
    This paragraph has a <code>.4rem</code> margin between it and the text
    above.
  </p>
  <p>
    My bottom margin collapses with my parent, yielding a bottom margin of
    <code>2rem</code>.
  </p>
</div>

<p>I am <code>2rem</code> below the element above.</p>

CSS

css
div {
  margin: 2rem 0;
  background: lavender;
}

p {
  margin: 0.4rem 0 1.2rem 0;
  background: yellow;
}

Kết quả

Xem thêm

Help improve MDN

Tìm hiểu cách đóng góp

This page was last modified on by MDN contributors.

Xem trang này trên GitHub • Báo cáo sự cố với nội dung này