- This topic is empty.
-
AuthorPosts
-
January 13, 2015 at 11:12 am #193100spz1stParticipant
Is this supposed to be the way? What’s the logic behind it?
Here is the url for a demo.
January 13, 2015 at 11:39 am #193107shaneismeParticipantYou’re looking for collapsing margins:
http://www.sitepoint.com/web-foundations/collapsing-margins/
January 13, 2015 at 3:13 pm #193126spz1stParticipantI’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.
January 13, 2015 at 3:55 pm #193140SenffParticipantThat is explained under “Collapsing Margins Between Parent and Child Elements” in @shaneisme’s link above.
January 13, 2015 at 4:23 pm #193141spz1stParticipantThanks. 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.
January 13, 2015 at 4:32 pm #193142shaneismeParticipantJoin the W3C.
Power to the people.
January 13, 2015 at 7:34 pm #193157spz1stParticipantHope 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.
-
AuthorPosts
- The forum ‘Other’ is closed to new topics and replies.