Minor marker issue: inline block child

Question

Heres the fiddle

When I set #twoto a string block, it subtracts 16 pixels of the top / bottom margins from <p>and adds it to the height of the content divs window, so it becomes 52px instead of 20px .. why is this the case?

Answer 1

What you see is one of the weird cases of collapse.

If the parent element and child elements are block elements, and there is nothing (padding, border, etc.) that separates their vertical fields, then these fields collapse. Collapsed fields are when two adjacent fields are not added (as expected), but the larger of the two is displayed instead. In the case of the parent-child, the collapsed edge ends outside the parent. You can read more information in the Parent and First / Last Child section in the link above.

Installing a parent element in inline-blockeither float:left;its or several other things (see the link for a more complete list) will stop field debris. This leads to the behavior we are used to: the child marker will appear inside the parent, adding it to the overall height, and the parent marker will also be displayed.

Answer 2

.

.

8.3.1

CSS ( ) , . , , , , .

, :

9.4.1

, , (, , - ), , "", "" ( , ) .

, , . "margin". .

...

• overflow , , visible - ( )

• display inline-block - ( )

• - ( )

Answer 3

, , clearfixing , ,

:

.two:before,
.two:after {
    content: " ";
    display: table; 
}

.two:after {
     clear: both;
}

fiddle. clearfix .

Answer 4

, ( ).

:

p 
{ 
    margin: 0px; 
}