Gộp lề CSS

Sự hợp nhất lề bên ngoài là khi hai lề bên ngoài thẳng đứng gặp nhau, chúng sẽ tạo thành một lề bên ngoài.

Chiều cao của lề bên ngoài sau khi hợp nhất bằng với chiều cao lớn hơn của hai lề bên ngoài hợp nhất.

Sự hợp nhất lề bên ngoài

Sự hợp nhất lề bên ngoài (叠加) 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 nhầm lẫn.

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

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

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

Hãy thử ngay

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

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

Hãy thử ngay

Mặc dù có vẻ lạ lùng, nhưng lề bên ngoài thậm chí có thể hợp nhất với chính nó.

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

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

Nếu lề bên ngoài này gặp lề bên ngoài của một yếu tố khác, nó cũng sẽ xảy ra sự hợp nhất:

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

Đó là lý do vì sao các đoạn văn trong một loạt các đoạn văn chiếm ít không gian, vì tất cả các lề bên ngoài của chúng đều hợp nhất lại với nhau để tạo thành một lề bên ngoài nhỏ.

Hợp nhất lề bên ngoài ban đầu có thể có vẻ lạ lùng, nhưng thực tế thì nó có ý nghĩa. Dưới đây là ví dụ về một trang văn bản tiêu chuẩn được组成 từ một số đoạn văn. Khoảng trống trên đoạn văn đầu tiên bằng với lề bên ngoài trên của đoạn văn. Nếu không có sự hợp nhất lề bên ngoài, lề bên ngoài giữa các đoạn văn sau sẽ là tổng của lề bên ngoài trên và 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 từ đầu trang. Nếu xảy ra sự hợp nhất lề bên ngoài, lề bên ngoài trên và dưới của các đoạn văn sẽ hợp nhất lại với nhau, làm cho khoảng cách ở mọi nơi đều nhất quán.

Ý nghĩa thực tế của CSS gộp lề

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

Tất cả các thuộc tính lề bên ngoài CSS

Thuộc tính Mô tả
margin Thuộc tính viết tắt để thiết lập thuộc tính cạnh bên ngoài trong một dòng biểu thức.
margin-bottom Đặt cạnh bên ngoài dưới của phần tử.
margin-left Đặt cạnh bên ngoài trái của phần tử.
margin-right Đặt cạnh bên ngoài phải của phần tử.
margin-top Đặt phần tử trên cạnh bên ngoài trên.