0

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

timezhong
  • 71
  • 2
  • 7
  • Can we see some code? Currently we do have to do some guessing as to what you mean, while code would really help clarify things. – Jasper Apr 23 '12 at 10:47

3 Answers3

2

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/

sandeep
  • 91,313
  • 23
  • 137
  • 155
0

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.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
  • 2
    no,you haven't konw what do it mean,overflow:hidden can establish a new blocking format context,and blocking format context will prevent collapsing margins. – timezhong Apr 23 '12 at 10:51
  • You mean there's a bug in all browsers? Wow. – Mr Lister Apr 23 '12 at 11:22
  • Hopefully you've figured out by now that it's not a bug in any browser ;) It's more of a side effect of a workaround for [something else](http://stackoverflow.com/questions/9943503/why-does-css2-1-define-overflow-values-other-than-visible-to-establish-a-new-b/11854515#11854515). – BoltClock Dec 12 '13 at 01:14
0

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

Varun Goel
  • 339
  • 3
  • 15