display-inline-block margins do not collaspe with its neighbor?

**PicnicTutorials** · Feb 22, 2013 07:37

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?

Code CSS:

<!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>

**ralph.m** · Feb 22, 2013 07:51

display: table; seems to work better.

**PicnicTutorials** · Feb 22, 2013 09:58

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.

**Paul O'B** · Feb 22, 2013 10:38

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

.

**PicnicTutorials** · Feb 22, 2013 13:25

Thanks guys.

**PicnicTutorials** · Feb 23, 2013 11:41

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?

**PicnicTutorials** · Feb 23, 2013 12:07

TEST PAGE

Code HTML4Strict:

<!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>

**ralph.m** · Feb 23, 2013 16:39

[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?

**PicnicTutorials** · Feb 23, 2013 16:58

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.

**ralph.m** · Feb 23, 2013 21:30

There's always JS, of course.

**Paul O'B** · Feb 24, 2013 04:49

Originally Posted by EricWatson

I could just wrap it them both in a container but I dont want to.

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.

**PicnicTutorials** · Feb 24, 2013 05:19

Originally Posted by Paul O'B

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.

User Tag List

Thread: display-inline-block margins do not collaspe with its neighbor?

Thread Tools

Display

display-inline-block margins do not collaspe with its neighbor?

Bookmarks

Bookmarks

Posting Permissions