CODEWITHSUNDEEP
htmlcss
IsidroGH
IsidroGH

Reputation: 2037

Gaps setting font-size in inline elements

I have problems setting font-size styles in inline elements. Some gaps comes up. There are questions related to this issue but I've not found a solution to my case.

Given this code:

<!doctype html>
<html>
    <style>
        .container {
            font-size: 40px;
        }

        p {
            margin: 0;
        }

        .small {
            font-size: 16px;
        }
    </style>
    <body>
        <div class="container">
            <p>Big text</p>
            <p>
                <span class="small">
                    Small text
                </span>
            </p>
            <p>
                <span class="small">
                    Small text
                </span>
            </p>
        </div>
    </body>
</html>

How could I remove the extra vertical gaps if the HTML markup can't be modified and new CSS can only be applied to the container div and its children?

I've tried setting vertical-aling:top and line-height:0 but I can't get it to work.

What I need is this:

enter image description here

What I'm getting is:

enter image description here

Upvotes: 1

Views: 76

Answers (2)

ad_on_is
ad_on_is

Reputation: 1550

Here you go! Just add .small {display: block} to your CSS and you're save.

<!doctype html>
<html>
    <style>
        .container {
            font-size: 40px;
        }

        p {
            margin: 0;
        }

        .small {
            font-size: 16px;
            display: block;
        }
    </style>
    <body>
        <div class="container">
            <p>Big text</p>
            <p>
                <span class="small">
                    Small text
                </span>
            </p>
            <p>
                <span class="small">
                    Small text
                </span>
            </p>
        </div>
    </body>
</html>
working fiddle: https://jsfiddle.net/y7edz1tj/

Upvotes: 1

metame
metame

Reputation: 2640

The font-size on the p elements is still 40px, the small class attributes are only being applied to the spans. If the order of these elements is static, then you could just apply the font-size of 16px to all p and the font-size of 40px to just the first p.

<!doctype html>
<html>
    <style>
        .container {
            font-size: 40px;
        }

        p {
            margin: 0;
            font-size: 16px;
        }
        
        p:first-child {
            font-size: 40px;
        }

        .small {
            font-size: 16px;
        }
    </style>
    <body>
        <div class="container">
            <p>Big text</p>
            <p>
                <span>
                    Small text
                </span>
            </p>
            <p>
                <span class="small">
                    Small text
                </span>
            </p>
        </div>
    </body>
</html>

Upvotes: 0

Related Questions