Question

I have a link converted to a block using css like that:

.button-user-add {
    background: green;
    width: 150px;
    height: 24px;
    display: block;

    float: right;
    text-align: center;
    color: #fff;

    text-transform: uppercase;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;

    font-family: Arial;

    line-height: 24px;

    margin-top: 24px;
    padding: 0px;

}

But the problem is that the padding from the top is about 1px less than from the bottom.

Why?

How can I fix it?

Answer 1

font-size:15px doesn’t exist for Arial. The browser will round to either 14px or 16px.

(Correction: Modern browsers now render a wider range of font sizes, including more odd-numbered sizes. Here’s a quick demo showing Arial 12px through 22px.)

The main part of the text (the space occupied by a capital H) is the baseline height. Above that is the ascender (used for accent marks on capital letters), and below it is the descender (used for the bottom of letters like y p and q).

font-size = ascender + baseline height + descender

The line-height reserves space for the font to be rendered in, but exactly where within that space the text is rendered varies based on the font-family, the font-size, the browser, and (if there’s no explicit line-height) the default line-height used by the browser. Within the line-height, the text will be roughly, but not exactly, centered.

As long as there’s an explicit line-height, the position of the text usually varies by no more than 1px from browser-to-browser, at least for Arial. But there’s no way to force the browsers to render the text more consistently than that.