Recently, I've been delving into the world of CSS and trying out "display:inline-block" as an alternative to "display:float". The general consensus from documentation is that properties commonly used on block elements can also be applied to inline-block elements. Things like "height", "width", "margin", and "padding" are usually mentioned.
While setting height and width has worked without issues for me, it seems that setting margin or padding doesn't have any effect in IE9 or Firefox 32. I haven't come across any examples where these properties are set either.
I prefer using margins and padding, especially since my content varies in width. Have I missed an example somewhere that addresses this issue?
Here's a snippet of code that I've been working with:
.lnk2 a {
display: inline-block;
margin: 2px 1em;
padding: 2px 2em;
}
<div class="lnk2">
<a href="rates/minneapolis-55401.htm">55401</a>
<a href="rates/minneapolis-55402.htm">55402</a>
<a href="rates/minneapolis-55403.htm">55403</a>
</div>
Regardless of the values assigned to "margin" or "padding", the display remains unchanged in both browsers.
In my original HTML, the "div" was actually an "ol" and each "a" tag was enclosed in an "li" pair. However, the outcome was the same - I simplified the above HTML structure to troubleshoot the problem.