So instead of the margins between them becoming 20px they become 40px. Any work around for this aside from not using display inline-block or changing its margins?
<!DOCTYPE HTML><html><head><meta charset="UTF-8">
<title>Website Code Tutorials - Testing</title>
<style type="text/css">
div {
margin:20px;
background:red;
}
#two {
display:inline-block;
background:blue;
}
</style>
</head>
<body>
<div>test1</div>
<div id="two">test2</div>
</body>
</html>
display: table; seems to work better.
I realized that I really didn’t need the top margin on the inline-block. But still interesting behavior that I have never noticed before.
Hi Eric,
Elements that create a “new block formatting context” such as floats, display:table-cell/row, inline-table etc (but not display:table), display:inline-block and absolute elements do not collapse their margins.
An inline-block element behaves much the same as a float would with respect to its margins so there is no difference if you used a float - assuming that you need horizontal alignment which the display:table that Ralph mentioned won’t do :).
Thanks guys. 
OK actually I didnt not need it. Double negative hard to follow huh. Anyways I need two anchors to display side by side as buttons. I need their margins to collapse top and bottom with their neighbors. And I need them both or just one anchor to clear (so stay above) their below neighbor. Some times there will be both and some times only one. Display tables margins do collaspe but they do not allow for both anchors to go side by side. I could just wrap it them both in a container but I dont want to.
Ideas?
TEST PAGE
<!DOCTYPE HTML><html><head><meta charset="UTF-8">
<title>Website Code Tutorials - Testing</title>
<style type="text/css">
div {
margin:20px 0;
background:red;
color:#000;
}
a {
display:inline-block;
margin:20px 0;
background:blue;
color:#000;
}
</style>
</head>
<body>
<div>Div</div>
<a href="#">Anchor</a><a href="#">Anchor</a>
<div>Div</div>
<br><br>
<p>Or it can be only one anchor</p>
<br><br>
<div>Div</div>
<a href="#">Anchor</a>
<div>Div</div>
</body>
</html>
[QUOTE=EricWatson;5329856I need their margins to collapse top and bottom with their neighbors.[/QUOTE]
Maybe a dumb question, but can’t you just remove the margins? When do you need them? Perhaps they could be added in just where you need them?
Ya that’s obviously an option. Moving this site is a monster of a job. I’m adding these buttons to all these existing pages which are all different. And i cant use find and replace in this case. I want to be able to throw the buttons in any of them and it works in all situations. Part of that working in all is that the margins collapse. So on some pages I don’t have 20px margin and on other pages 40px. I’m guessing there is no solution. In which case I will just wrap in in a P and margin that.
There’s always JS, of course.
That would be the best and most semantic approach as the inline elements need to be contained in a parent anyway. You should avoid running inline elements straight into block elements as that forces the browser to construct anonymous block boxes to hold the inline content and older IE “sometimes” gets this wrong.
ok thats what I will do - thanks guys :). I usually ignore such things and rather shoot for less code is more. I have let go of ie6/7 and its liberating. Now ie8 is my ie6. I just need to keep it all working but it looks like poop in comparison with all its blocks no shadows and no transparency. Buts thats ok I just need it to function.