Clever Geek Handbook

Vertical margin doesn't crash in Chrome

In this fiddle http://jsfiddle.net/munkii/tpQQN/ I have a bottom margin in paragraph elements via intro class and some bottom margin on list elements via what-is class.

i.e.

article.about .what-is {
    height: 100%;
    margin-bottom: 34px;
    padding-right: 34px;
    width: 600px;
}

article.about p.intro {
    font-weight: bold;
    margin-bottom: 43px;
}

I've removed unnecessary margin from my work, but I'm still curious to know why Chrome doesn't collapse the vertical border when FF and IE do.

Any thoughts?

+3


source to share


2 answers


It can only be a mistake.

According to http://www.w3.org/TR/CSS2/box.html#collapsing-margins, these fields should be collapsed like we do in this case:

the bottom margin of the last child stream and the bottom margin of its parent if the parent has an "auto" calculated height

Height

.what-is

'should be evaluated as auto

because



If the height of the containing block is not explicitly specified (ie depends on the height of the content), and this element is not absolutely positioned, the value is calculated as "auto".

( http://www.w3.org/TR/CSS2/visudet.html#the-height-property )

The strangest thing is that the computed height is valid auto

, but Chrome doesn't seem to do what it implies.

As Alex's comment says, you can remove the rule height: 100%;

that allows an element to take into account its default height. auto

...

0


source


MatTheCat said well.

Is it because your height is 100%, Firefox takes the height of the containing Div as height. If Chrome appears to include the bottom border of the box in the p tag to the height of the containing Div.



If that makes sense ...

0


source






More articles:


All Articles