Question

I’ve always wondered what the ‘best’ way to position text inside a div is

1) Put padding on the element surrounding the text and minus the padding from the height/width of the element.

<div class="button">
    Activate
</div><!-- button -->

.button
{
    height: 20px;   /* -10px from padding for text */
    width: 90px;    /* -10px from padding for text */
    padding-left:10px;
    padding-right:10px; 
}

2) Put a span around the text, and position it as its own element.

<div class="button2">
    <span class="button2-text">
        Activate
    </span>
</div><!-- button2 -->

.button2
{
    height: 30px
    width: 100px
}
.button2-text
{
    padding-left:10px;
    padding-top:10px;
}

I always go with 1) because its less code, but I feel 2) is more proper or something Wondering if I’m in the wrong for using method 1) in any way.

Answer 1

Your second option doesn’t mix the height / width with the padding.

Nowadays browsers all follow the same box model (which is how you position in option 1). This is equivalent to having box-sizing: content-box.

Internet Explorer versions up to 6 and Quirks mode didn’t and used the alternative one which included padding as part of the width, equivalent to box-sizing: border-box.

In order to correctly position for both models, using option 2 is the safest.

If you check http://jsfiddle.net/stb5a/ , box-sizing is set to content-box. Changing it to border-box doesn’t change the positioning of the text;

So basically, option 2 would be used for compatibility with older versions of Internet Explorer (now pretty much gone) and by developers who use to code for these versions, using the same pattern as they’ve always done.