CSS markup breaks without border on div

Question

I have encountered this problem several times. Still has no idea what causes this.

Play:

• Open http://jsbin.com/ibowed/1/edit
• In the CSS panel, find .l-search-index .top { @line 26
• change border: 1px solid #ff0000; on border: 0;
• whaaat?

Browser: chrome, but I think you can try any other.

Please advise!

Answer 1

This is a rather unintuitive case of dropping fields:

§ 8.3.1 of the CSS specification explains how fields are processed and under what circumstances they collapse. The rules are not too easy to understand (there are a few special cases), but I quote the relevant parts of the specification for you:

In CSS, adjacent fields of two or more fields ( which may or may not be siblings ) can combine to form a single stock. Margins that combine in this way say they are collapsing, and margin is called the compensated limit.

Two fields are adjacent if and only if: there are no string fields, no gaps, no indentation, and no border separating them

^{(emphasized by me)}

So, as soon as you remove the border, the vertical margins of your elements collapse. Your case gets a little more complicated since you have negative fields.

To fix this, you can set the overflow property or apply padding:1px to the .top element.

Answer 2

This applies to how fields overlap and how certain properties make them contain. If you place 2x divs on the page, both with 100px margins, the distance between these divs will be 100px. Not 200px. This is because fields are allowed to overlap other fields. This is how fields work. It's good.

But if you put a div inside another div, both with fields, then these fields also overlap. Fields of child elements overlap the parent element.

But some properties - the border, as you discovered, but also the addition and overflow - force the parent to contain the fields of their child element instead of overlapping them.

I am sure that someone can give a more technical explanation, but I am thinking about what is happening.

Here is a simplified example: http://jsbin.com/ukodus/2/
Remove // in front of any of the CSS lines to see the effect.

---

"This behavior is called a crash. Only the upper and lower margins collapse, not left and right." - @cimmanon

Answer 3

Here is the solution.

 .l-search-index .top{border: 0; height: 70%; overflow: auto;} 

You need to add overflow.

Hope this helps.