Why margin settings in a contained section affect the containing section?

[spz1st]

Is this supposed to be the way? What’s the logic behind it?

Here is the url for a demo.

http://arvha.com/margin.html

[shaneisme]

You’re looking for collapsing margins:

http://www.sitepoint.com/web-foundations/collapsing-margins/

[spz1st]

I’m not sure if it’s the same issue. My case is about an outer box and an inner box (not two sibling boxes next to each other). If I set a margin for the inner box, I’d expect to see the margin around the inner box (don’t you expect so too?), not outside the outer box.

[Senff]

That is explained under “Collapsing Margins Between Parent and Child Elements” in @shaneisme’s link above.

[spz1st]

Thanks. I hadn’t read the further down. But I disagree with the author on that such behavior is often desirable. By default, the margins should be kept separate and a css type (say margin-collapse: collapse;) could be made available to collapse the margins if ever so desired (or just set the margin to 0 ). Though now you can have a border or padding to prevent margin collapse, it may not be desirable to have a border or padding no matter how thin it is (let alone that 1 pixel border might even destroy your overall layout as shown in my other examples). So again I propose to have a new css type (say margin-collapse: none;) to prevent the margin collapse.

[shaneisme]

Join the W3C.

Power to the people.

[spz1st]

Hope there’re W3C members here who may read my posts and forward my proposals to the committee for consideration.

The margin collapse issue’s not a big problem as the width/height issue. Now I know (thanks for the help I got here) that I can add a border (with the same color as the margin if so desired) to get exact what I want if needed. But with the width/height issue, sometimes (quite often) I just could not get exact what I wanted without using javascript. For example, if I have two divs laid next to each other horizontally. the width of the left div is set to, say 25% and the right one 75%. Now if I add a margin to one of them, the total width would exceed 100% and a scrollbar will be created (if I force the two divs still to be aligned next to each other horizontally) even though no content going beyond the edge of the window, making page viewers wonder why there’s a scrollbar for some white space on right. To prevent the scrollbar, I can reduce the percentage a little bit for one of the divs. But this will certainly result in the two divs not covering the page entirely except when the window happens to be at a certain width.

[Author]

Posts