Inline (HTML) elements don’t do left or right margins… No, really; you can’t put margin’s on an inline element and expect it to behave. Quite often I’ve been able to hack my way around this by adding padding to the element instead, but this doesn’t always work, especially on images.
For many months I’ve had this issue with breadcrumbs (pathways) in Joomla! 1.0.x. An example of the type of output you’re likely to find from Joomla’s mospathway() function might be as follows:
<span class=\"pathway\"><a href=\"#\" class=\"pathway\">Home</a>
<img src=\"#/arrow.png\" alt=\"arrow\" />
<a href=\"#\" class=\"pathway\">Sub page</a></span>
You can see that it outputs images without any surrounding elements, so we can’t use my little padding hack. However, today while working on a project it hit me: Hmm… I wonder if word-spacing will affect images the same way it does text???
So, I gave it a go and sure enough, word-spacing works a treat. My simple solution works as follows:
.pathway {
word-spacing: 1em;
}
.pathway a {
word-spacing: normal;
}
You can see that we add the word-spacing (duh!) and then reset the word-spacing inside the anchors, that way we’re only really affecting the spacing around the images.
This little solution is going to be a welcome addition to my little “toolkit” as this problem has often found me going to such length as floating all the elements, using margins and then clearing a whole bunch of stuff to make it work; which is both expensive (in code length) and messy. I haven’t tried this trick on other issues (like spacing inline list-items for columns) etc, but I can only imagine it’s going to pretty much make my year!