Mô hình khung: Biên độ CSS hợp nhất

Việc hợp nhất biên độ chỉ xảy ra khi hai biên độ thẳng đứng gặp nhau, chúng sẽ tạo thành một biên độ.

Chiều cao của biên độ hợp nhất bằng chiều cao lớn nhất giữa hai biên độ gặp nhau.

Việc hợp nhất biên độ

Việc hợp nhất biên độ (叠加) là một khái niệm tương đối đơn giản. Tuy nhiên, trong thực tế, khi sắp đặt trang web, nó có thể gây ra nhiều hiểu lầm.

Nói một cách đơn giản, việc hợp nhất biên độ chỉ xảy ra khi hai biên độ thẳng đứng gặp nhau, chúng sẽ tạo thành một biên độ. Chiều cao của biên độ hợp nhất bằng chiều cao lớn nhất giữa hai biên độ gặp nhau.

Khi một phần tử xuất hiện trên một phần tử khác, biên độ dưới của phần tử đầu tiên và biên độ trên của phần tử thứ hai sẽ hợp nhất. Xem hình dưới đây:

Mô hình gộp lề CSS ví dụ 1

Thử trực tiếp một lần.

Khi một phần tử chứa trong một phần tử khác (giả sử không có biên độ trong hoặc viền để chia tách biên độ), biên độ trên và/hoặc dưới của chúng cũng sẽ hợp nhất. Xem hình dưới đây:

Mô hình gộp lề CSS ví dụ 2

Thử trực tiếp một lần.

Mặc dù có vẻ kỳ lạ, nhưng biên độ thậm chí có thể hợp nhất với chính nó.

Giả sử có một phần tử trống, nó có biên độ, nhưng không có viền hoặc lấp đầy. Trong trường hợp này, biên độ trên và dưới sẽ gặp nhau, chúng sẽ hợp nhất:

Mô hình gộp lề CSS ví dụ 3

Nếu lề này gặp lề của phần tử khác, nó sẽ xảy ra hiện tượng gộp: }}

Mô hình gộp lề CSS ví dụ 4

Đây là lý do tại sao các phần tử đoạn văn liên tiếp chiếm ít không gian, vì tất cả các lề của chúng được gộp lại để tạo thành một lề nhỏ.

Ban đầu, hiện tượng gộp lề có thể có vẻ lạ lùng, nhưng thực tế nó lại có ý nghĩa. Ví dụ với trang văn bản thông thường được组成 bằng nhiều đoạn văn. Khoảng trống trên của đoạn văn đầu tiên bằng với lề trên của đoạn văn. Nếu không có hiện tượng gộp lề, khoảng trống giữa các đoạn văn tiếp theo sẽ là tổng của lề trên và lề dưới. Điều này có nghĩa là khoảng trống giữa các đoạn văn là hai lần khoảng trống trên cùng của trang.

Ý nghĩa thực tế của mô hình gộp lề CSS

Ghi chú:Chỉ có lề ngoài của khung khối văn bản thông thường mới xảy ra hiện tượng gộp lề. Lề ngoài của khung khối trong dòng, khung khối trôi hoặc khung khối định vị tuyệt đối sẽ không gộp.