Whenever I have two elements side by side horizontally with right and/or left padding and/or margin specified, there is often space between the elements over and above what I’ve specified. I’m hoping someone can tell me how to eliminate that space (without something crufty like a negative margin).
Please note: I am not looking for alternative multi-column CSS layout techniques. I know there are loads of them out there and this issue is bigger than just a column layout issue.
Below is the markup and styles for a working example page. Here’s a partial screenshot of that page that shows left elements selected with Firebug. The mysterious space in question is to the right and is marked with a red asterisk. There are no reset styles included but I’ve plugged in Eric Meyers’ reset and it didn’t solve the problem.
<div id="side-a">
<p>
Lorem ipsum ....
</p>
</div>
<div id="side-b">
<p>
Nunc dapibus....
</p>
</div>
<div id="website-footer">
<ul id="legal-information">
<li>Copyright 2011</li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
div#side-a,
div#side-b {
display: inline-block;
width: 200px;
padding: 17px 17px 0;
}
div#side-a {
vertical-align: top;
}
div#side-b {
background: #999;
}
ul {
padding-bottom: 17px;
list-style: none outside none;
}
ul li {
line-height: 17px;
margin-left: 17px;
}
div#website-footer ul#legal-information {
float: left;
}
div#website-footer ul#legal-information li {
border-left: 1px solid #29443C;
display: inline;
margin: 17px 0;
padding-left: 8px;
}
div#website-footer ul#legal-information li:first-child {
border-left: medium none;
padding: 0 8px 0 0;
}
It’s natural because of
inline-block. Simple solution is to kill whitespace.http://work.arounds.org/issue/6/unwanted-white-space-between-inline-block-elements/
There are other css based workarounds such as setting a font size of 0 on the body, but AFAIK they aren’t as consistent/reliable. I could be wrong though.