Question

这是一个css-noob问题，但我不明白：为什么下面的代码没有显示外部div的任何填充？

<html>
    <style>
        div {
            border: 1px solid red;
            padding:10em 30em 10em 30em;
            font-size:0px;
        }
        a {
        font-size:1rem; 
        }
    </style>
    <body>

        <div>
            <a href="#">hello</a>
        </div>

    </body>
</html>

如果删除font-size属性，您将看到填充。但是为什么font-size会影响填充？

Answer 1

您已经以em为单位设置了填充，该填充是根据应用它的元素的基本字体大小计算的，您已将字体大小设置为0px，因此计算出的输出对于em单位为0（假设为10em x 0（px）），因此填充的大小为0。

您可以使用rem代替em。 rem基于文档的root或HTML标记的字体大小。因此，如果您需要使用em，但元素上的强制字体大小不正确，请在HTML代码上设置根字体大小，并在需要时使用rem代替{{1 }}

Answer 2

＆＃34; em和ex单位依赖于字体，并且对于文档中的每个元素可能不同。 em只是字体大小＆＃34;。

来源：W3.org

所以......当em用于填充时，0 font-size为0填充。

为什么填充没有任何影响

2 个答案: