Lề CSS được thêm hoặc được kết hợp?

Question

Giả sử rằng chúng ta có đoạn mã sau:

<div style="margin-bottom:100px;">test</div> 
<div style="margin-top:100px;">test</div> 

tôi nhận thấy rằng đôi khi nó tạo ra 100px của lề giữa các yếu tố và đôi khi nó là 200px (khi chúng ta sử dụng một số thiết lập mà tôi không quen với). Tôi không thể tìm thấy bất kỳ thông tin nào về điều đó trong đặc điểm kỹ thuật. Điều này phụ thuộc vào điều gì?

Nếu chúng tôi có h1 và p trong tài liệu trống thì lề của h1 sẽ được kết hợp với lề của p. Họ sẽ không tăng thêm. Cho dù lớn hơn sẽ được sử dụng.

Answer 1

Điều này xảy ra vì lợi nhuận của bạn được phép thu gọn. Một số lề có thể chồng lên nhau (chủ yếu là chặn các phần tử) và tạo thành một lề kết hợp được xác định bởi lớn hơn của hai giá trị được xác định trong các quy tắc kiểu phần tử được tính toán - đó là những gì đang xảy ra ở đây. This section từ tài liệu CSS Box Model giải thích chi tiết.

Edit: Là một địa điểm ưa thích, bạn có thể làm được việc này mà không cần điều phá vỡ trong một vài cách

• Làm các yếu tố (tức là phá vỡ lề gập lại.) (nhiều?) width: 100%; display: inline-block
• Đặt một khối height: 0; width: 0; overflow: hidden giữa các phần tử và đặt dấu chấm hoặc dấu chấm trong đó.

Tôi đã chia tay một số ngòi fiddle để minh họa. Có thể có các phương pháp khác nhưng đây là cách nhanh chóng để có được các biên lợi nhuận có thể thu gọn nếu bạn cần.