CODEWITHSUNDEEP
htmlcss
ExDirty
ExDirty

Reputation: 79

Font height issue on the same line

Example of problem: Example of problem

    <ol><li>
<span>01</span><h4>SOME TEXT</h4>
</li></ol>

#faq ol li h4
{

    padding-bottom: 16px;
    padding-top: 14px;
    padding-left: 16px;
    max-width: 710px;
    width: 100%;
    color: #fff;
    font-family: DINCE-Medium , Arial, sans-serif;
    font-size: 16px;

I have some issues with setting the number on the same line next to the heading with the same height as the heading background.

I really don't know how to set number in span because every time when I set to the number same height (font size) as h4 background it has a little bit bottom spacing and that ruin it.

I tried reset padding and margin to span but I got same result.

I am grateful for every advice : ))

Upvotes: 1

Views: 64

Answers (1)

Josef Engelfrost
Josef Engelfrost

Reputation: 2965

It is practically impossible to set the height of the text to match the height of the box. Fonts are rendered slightly differently on different browsers and systems, so it will never become 100% pixel perfect. You can never have total control of the font rendering.

If you need pixel perfect, use an image. Otherwise try to get some statistics of what browsers and operating systems your visitors are using and try to make the design good enough for the majority of them.

Upvotes: 2

Related Questions