Html 如果未指定宽度，填充在哪里继承长度_Html_Css_Padding

Html 如果未指定宽度，填充在哪里继承长度

html css

Html 如果未指定宽度，填充在哪里继承长度,html,css,padding,Html,Css,Padding,我想知道每当我使用em和percentage时，代码中有多少像素。EM使用默认浏览器字体大小，可以重写，并且它确实继承父块但是，当我使用百分比时，我无法计算出确切的像素数根据w3.org 百分比：指包含块的宽度如果我没有指定它的包含块的宽度，它指的是哪里。看看这个 html{ 字体大小：20px； } .小{ 字体大小：200%；填充：.5em； } .大{ 字体大小：.5em；填充：10%；边框：1px纯色灰色； } 爱书信我的屏幕分辨率重要吗？我的意思是，如果我有1

我想知道每当我使用em和percentage时，代码中有多少像素。EM使用默认浏览器字体大小，可以重写，并且它确实继承父块

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

根据w3.org

百分比：指包含块的宽度

如果我没有指定它的包含块的宽度，它指的是哪里。看看这个


html{
字体大小：20px；
}
.小{
字体大小：200%；
填充：.5em；
}
.大{
字体大小：.5em；
填充：10%；
边框：1px纯色灰色；
}

爱
书信

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

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

您的

.small

容器的填充为.5em，计算为该容器当前设置的字体大小的.5em。换句话说，它是.5em的20px（基本字体）*200%（字体大小设置在

.small

中）

但是

.big

的填充为10%。它的父容器是

p.small

，默认为可用主体的100%。因此，

.big

的填充为可用正文宽度的10%

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

分辨率肯定很重要。

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