Question

Say I have

<span class="ib-half"></span>
<span class="ib-half"></span>

and

.ib-half {
    display: inline-block;
    width: 50%;
}

I expect the two spans to display side-by-side but they won’t. There’s no margin, padding, or border, so what’s the problem?

Answer 1

The actual problem is the space (newline) between the two elements. Because it’s an inline-block element, it registers the space, so it’s 50% + the space.

Some possibilities:

<span class='left'>Left</span><!--
--><span class='right'>Right</span>

or <span class='left'>Left</span><span class='right'>Right</span>

or

<span class='left'>Left</span><span
class='right'>Right</span>

or to me it really probably makes the most sense to float: left; and change it to a display: block element. I believe the nature of inline elements is to operate in the same manner as text with some extra spacial information, so why get hacky when there’s no reason to?