Question

I use <div> tags to insert icons in my pages:

<div class="icon warning"></div>There is a warning in the page

The problem is that the icons are too close to the text:

Here is the code for the icon:

div.icon{
    display:inline-block;
    width:16px;
    height:16px;
    background-color:transparent;
    background-image:url(/images/icons.png);
    background-repeat:no-repeat;
    vertical-align:text-top;
    background-position:0 0;
}

div.icon.warning{
    background-position:-48px 0;
    cursor:help;
}

I want to place a few pixels distance between the icon and the text only if the icon is being followed by some text. In other words if there is no text after the icon, I don’t want that space. In other words for the following code, I want to have 5px distance between div#icon1 and the text “There is a warning in the page” but I don’t want any distance between div#icon2 and the elements coming after it:

<li><div id="icon1" class="icon warning"></div>There is a warning in the page</li>

<li><div id="icon2" class="icon warning"></div></li>

Please note that the icons will not always appear within <li> elements so your suggested selectors cannot rely on the context that the icons may appear. The only thing certain about the icons is that if they are followed with some text, there must be some space between them and the text.

Answer 1

If you are willing to restructure your markup a little (without adding any additional size to it):

http://jsfiddle.net/8kcQv/

The key line is:

.icon:empty{ padding-left: 20px; }

This works in IE 9, Chrome, etc. Other browsers will add extra space between empty elements. Here’s an alternate version which degrades differently (less space between icon and text) when :empty is not supported:

http://jsfiddle.net/8kcQv/1/

HTML

<div class="icon">This message has text.</div>
<br>
<br>
<div class="icon"></div><div class="icon"></div><div class="icon"></div><div class="icon"></div><div class="icon"></div>

CSS

.icon{
 padding: 4px 4px 4px 32px; /* 32px adds extra space to pad against text */
 height: 24px;
 line-height: 16px;
 font-family: sans-serif;
 font-size: 16px;
 background:url(http://icons.iconarchive.com/icons/pixelmixer/basic/16/warning-icon.png) no-repeat 4px 4px;
 display: inline-block;
}

/* empty matches elements with no children (including text nodes) */
.icon:empty{ padding-left: 20px; } 

Alternatively, you might be able to do without :empty altogether if you use a style like:

.icon{
    padding: 4px 8px 4px 24px;
    ...
}

This places equal distance on both sides of the icon.