So let's say I had several <div>s, each having a margin-top and a margin-bottom. I would expect these elements to be arranged one after the other: Top Margin -> Div -> Bottom Margin for each one. However, the top margin is "going over the bottom margin" (fiddle). So the distance between each element is just the margin-top.
I've found a way to fix this using float:left;, however I must not use this property, neither absolute positioning.
PS: If you can't see the problem in the fiddle, use something like Chrome's console.
What you are seeing is called margin collapse. It is the correct behaviour according to the standard.
Margin does not push down another margin
Related
Here's a JSFiddle:
http://jsfiddle.net/cKuUy/2/
Here's a screenshot of what I'm aiming for:
And what I'm getting in my browser:
The key difference is that in the actual implementation, the bars do not fill the available width of the containing div element. If I place: width:100%, the bar expands to it's container width, but goes down, below the text; despite both elements being floated left.
Any suggestions?
This solution should help: https://stackoverflow.com/a/1767270/1472586
Basically remove float: left and width from the bars and add overflow: hidden to them. You may also have to adjust your margins accordingly (right padding on the headings might work better, for example).
I'm starting a new project and i wanna use normalize.css but i'm facing one little problem with. In the top of the DOM you'll find a yellow gap, body background-color.
The main container is green colored and contains exactly the html from normalize.css demo.
You'll find a demo right here: http://goo.gl/hf8cv
What you see is margin collapsing.
When an element with a margin is inside an element without border or padding, the margin collapses with the margin of the parent element.
It's the margin of the h1 element that you see at the top. As none of the parents have border or padding, the margin collapses all the way out to the outermost container.
I'm trying to use sticky footers on my page but I'm having a problem where the footer appears below the window, even if there is no content.
This page says that this is caused by using margin on some of the elements, thus the footer is being "pushed" down by the accumulated values of the margin's. The page suggests to replace margin with padding, but that breaks my design, since they aren't exactly the same thing.
What else can I do to "pull" the footer up?
Here's a link to show my problem: http://john2x.com/wordpress/?p=4
If your div has padding maybe you should also sum the top and bottom paddings to the negative margin you're giving to it...
So for example if your div has 10px top and bottom margin, I think you should add 20px to its negative margins.
If there are elements with margin inside the footer that are pushing it down, maybe you should also add those margins to the negative margin of the footer.
I believe this is being caused by your #page-wrap min-height being set to 100%.
I think the easiest solution would be to move your footer div within the #page-wrap div, then it will fall within the bounds of the page.
Hope this helps!
I have two divs, one above the other, i would like the bottom div to ignore the one above it. The bottom div has the top margin property. By ignore i mean i dont want the top div to be counted when it is using top margin (but rather to push against the wrapper which contains both divs.)
Just use absolute positioning for the top div.
If I understand correctly you could change the top div to position:absolute; which will take if out of the flow of the document.
Has anyone else ever ran across this? This is the second time it's come up in as many years and I am not sure the "correct" way to solve it.
I can achieve the same results with padding in the child, but it just makes no sense.
Testing in Safari/FF.
I usually solve this problem by setting display: inline-block on outer div. It'll make outer div to occupy exactly the space necessary to display its content.
An example, showing the difference.
It is called margin-collapse. When a top and bottom margin are directly touching (not separated by anything, like a border or line break) the margins collapse into a single margin. This is not a bug. Read more about it here at SitePoint.
Sounds like margin collapsing which is natural behaviour. This is a good read:
http://www.andybudd.com/archives/2003/11/no_margin_for_error/
There are number of ways to get round margin collapsing issues. One way is to add a border
or 1px of padding around the elements so that the borders are no longer touching and so no
longer collapse.
Another way to stop margins collapsing is to change the position property of the
element.The CSS2 Specs explain that margins of absolutely and relatively positioned boxes
don't collapse. Also if you float a box it's margins no longer collapse. It's not always
appropriate to change the position properties of an element but in some situations if
you're having problems with unwanted margin collapsing, this may be an option.