如果没有指定宽度，填充从哪里继承长度

Question

我想知道每当我使用 em 和百分比时代码中有多少像素。 EM 使用默认的浏览器字体大小，可以覆盖，它确实继承了父块。

但是，当我使用百分比时，我无法计算出确切的像素是多少。

根据w3.org

Percentages: refer to width of containing block

http://www.w3.org/TR/CSS2/box.html#padding-properties

如果我不指定其包含块的宽度，它指的是哪里。检查这个。 https://jsfiddle.net/jameslem/2fygk5bq/

    <style>
    html{
    font-size: 20px;
}
.small{
    font-size:200%;
    padding: .5em;
}

.big{
    font-size:.5em;
    padding: 10%;
    border: 1px solid gray;
}
</style>
<body>
    <p class="small"> 
    LOVE <!-- font-size in px is 40 and padding is 20px --> 
        <span class="big">LETTER</span> <!-- font size is 20px and I want to know how many pixel is 10% padding-->
    </p>

</body>

我的屏幕分辨率重要吗？我的意思是如果我有 1360 x 768，我的宽度 1360px 是否也是百分比获得百分比的基础？

Answer 1

设置填充时，如果使用百分比，它会通过乘以父容器的宽度来计算数量。但是，如果您使用 em 单位设置填充，它会乘以容器的字体大小。

您的 .small 容器有 .5em 的填充，计算为该容器当前字体大小设置的 .5em。换句话说，它是 .5em of 20px (base font) * 200% (font-size setting in .small).

但是 .big 有 10% 的填充。它的父容器是 p.small，默认为可用主体的 100%。因此，.big的padding是可用body宽度的10%。

如果您需要在应用 CSS 规则后找出填充的确切像素，您可以使用 JavaScript。在处理相对单位时，设备分辨率、客户端字体大小设置和浏览器都可能影响像素大小。

如果没有指定宽度，填充从哪里继承长度

if no width is specified, where do padding inherit length

html

css

padding