CODEWITHSUNDEEP
cssoverflow
timezhong
timezhong

Reputation: 71

overflow:hidden can't prevent collapsing margins

overflow:hidden can establish a new blocking format context,and blocking format context can prevent collapsing margins. but in this example,it doesn't work,the gap between them is still 20px. why? http://www.w3.org/TR/CSS2/visuren.html#block-formatting
http://www.w3.org/TR/CSS2/box.html#collapsing-margins

.mod-a,.mod-b{margin:20px;overflow:hidden}

enter image description here

Upvotes: 0

Views: 983

Answers (3)

sandeep
sandeep

Reputation: 92873

overflow:hidden do not collapse with their in-flow children but it's collapsed with other DIV's . Write like this:

div{
    margin:20px 0;
    background:red;
    width:50px;
    height:50px;
    float:left;
    clear:left;
}

Check this http://jsfiddle.net/fXz57/

Upvotes: 2

Varun Goel
Varun Goel

Reputation: 339

There is margin because in your class you have given margin as 20 px. Remove the margin from css class .mod-a,.mod-b:20px.

Overflow-hidden has nothing to do with this. It is used when you have a long element inside other say label is 50 px width and text inside is 200 px. Then overflow:hidden will hide the oth

Upvotes: 0

Mr Lister
Mr Lister

Reputation: 46629

Overflow has nothing to do with margins or paddings. If you don't want a margin, set margin to 0 instead of trying to change overflow.

Upvotes: 0

Related Questions