tracking span

by sprugman

HTML

<h1>No span:</h1>
<h2>no image:</h2>
<div></div>
<p>Just to see what it looks like.</p>

<h2>with image:</h2>
<div><img src="http://farm4.staticflickr.com/3619/3351433330_58fe69cd17_m.jpg" /></div>



<hr />

<h1>Using inline-block span:</h1>
<h2>no image:</h2>
<div><span class="inlineBlock">hide me</span></div>
<p>Don't want the div taking up space when it's empty.</p>

<h2>with image:</h2>
<div><span class="inlineBlock">hide me</span><img src="http://farm4.staticflickr.com/3619/3351433330_58fe69cd17_m.jpg" /></div>

<hr />

<h1>Using inline span:</h1>
<h2>no image:</h2>
<div><span class="inline">hide me</span></div>
<p>With inline, the span isn't hidden.</p>

<h2>with image:</h2>
<div><span class="inline">hide me</span><img src="http://farm4.staticflickr.com/3619/3351433330_58fe69cd17_m.jpg" /></div>

<hr />

<h1>Using empty span:</h1>
<h2>no image:</h2>
<div><span></span></div>
<p>With empty span, the span is invisible, but it aligns to the left, not the center even when the image is in place. (Look in chrome's debug tools to see it.)</p>

<h2>with image:</h2>
<div><span></span><img src="http://farm4.staticflickr.com/3619/3351433330_58fe69cd17_m.jpg" /></div>

CSS

h1 { font-weight: bold }
h1, h2 { margin: 1em; }

div {
    background: lightyellow;
    text-align: center;
    margin: 0 2em .5em;
    border: 1px solid red;
}

hr {
    margin: 3em 0;
}

span {
    height: 0;
    width: 0;
    overflow: hidden;
}


.inlineBlock {
    display: inline-block;
} 

p{
    font-size: .8em;
    color: #666;
    font-style: italic;
    padding-left: 3em;
}

img {
    vertical-align: bottom;
}