Question

If I have a character (say “+”) inside text and I would like to place it in a bordered box, I can just wrap it in a span and set border: solid 1px of course. But what if I wish to have specific dimensions for the box, like 0.5em by 0.5em? By default, span is inline, so width and height are ignored.

I thought setting display: inline-box would help, but this seems to cause the borders to be drawn in odd ways, so that the character is not in the box at all, and differently in different browsers; see http://jsfiddle.net/csMLu/

Is there something I need to set on the element, or is there a better basic approach?

Answer 1

Setting line height and text-align seems to make it work, however the 0.5em container is to small for the text.

.box05 {
    height: .5em;
    width: .5em;
    line-height: .5em;
    font-size: .9em  /* smaller then the others */
}

.box06 {
    height: .6em;
    width: .6em;
    line-height: .6em;
}

.box07 {
    height: .7em;
    width: .7em;
    line-height: .7em;
}

.box08 {
    height: .8em;
    width: .8em;
    line-height: .8em;
}

.box09 {
    height: .9em;
    width: .9em;
    line-height: .9em;
}


p { margin: 1em; }
span { border: solid #444 1px; text-align: center; display: inline-block; }

<p>Use the <span class="box05">+</span> button!

<p>Use the <span class="box06">+</span> button!
    
<p>Use the <span class="box07">+</span> button!
    
<p>Use the <span class="box08">+</span> button!
    
<p>Use the <span class="box09">+</span> button!