在行内元素中设置字体大小的间隙

debugcn 发表于 Dev

伊西德罗GH

我在内联元素中设置字体大小样式时遇到问题。一些差距出现。有与此问题相关的问题，但我还没有找到解决我的案例的方法。

鉴于此代码：

<!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>

如果无法修改 HTML 标记并且新 CSS 只能应用于容器div及其子项，我该如何去除额外的垂直间隙？

我试过设置vertical-aling:top，line-height:0但我无法让它工作。

我需要的是这个：

我得到的是：

把我放进去

p元素上的字体大小仍然是40px，small类属性仅应用于跨度。如果这些元素的顺序是静态的，那么您可以将 16px 的字体大小应用于所有元素，将p40px 的字体大小应用于第一个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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。