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:

margin-top của phần tử cha collapse với margin-top của phần tử con đầu tiên trong luồng, trừ khi phần tử cha có border-top, padding-top, chứa nội dung inline (như văn bản), hoặc có clearance được áp dụng.
margin-bottom của phần tử cha collapse với margin-bottom của phần tử con cuối cùng trong luồng, trừ khi phần tử cha có height hoặc min-height được xác định, có border-bottom, hoặc padding-bottom.

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

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content