[英]em margin not correct
i have a some problem with em units. 我对em单位有一些问题。
my base em unit is 16px 我的基本em单位是16px
body {
font-size:16px;
}
i try to give 30px margin-top to my h4 element. 我尝试给我的h4元素30px的页边距。
so 30px is equal to 1.87em, 所以30px等于1.87em,
h4 {
font-size:1.875em;
line-height: initial;
margin-top: 1.87em;
}
but when i look from web inspector computed section, there is, 但是当我从网络检查器的计算部分看时,
margin-top:56.1px;
computed. 计算。
when i use px instead of em, like margin-top:30px; 当我使用px而不是em时,例如margin-top:30px; everything is normal.
一切正常。
why this problem happened? 为什么这个问题发生了?
IMHO, you shouldn't calculate em to pixels, but I understand it helps you to understand what you are doing. 恕我直言,您不应该将em计算为像素,但是我了解它可以帮助您了解自己在做什么。 So ontopic....
如此ontopic。
You are defining a base size on your body 16px
您正在为自己的身体
16px
基本尺寸 16px
You define a font-size for you h4, 1.875em
which means: 1.875 x 16 = 30px
. 您为h4定义了一个字体大小,即
1.875em
,这意味着: 1.875 x 16 = 30px
。
These 30px
are now the base size for your h4. 这
30px
现在是h4的基本尺寸 。
Meaning, the margin-top that you define on your h4 is actually 1.87 x 30 = 56.1px
意思是,您在h4上定义的边距顶部实际上是
1.87 x 30 = 56.1px
So if you want a '30px margin', use margin-top: 1em
on your h4. 因此,如果您想使用'30px的边距',请在h4上使用
margin-top: 1em
。
Hope it makes sense.... 希望有道理....
As already commented by Mr. Lister, as alternative you could use rem
instead of em
正如Lister先生已经评论过的,作为替代,您可以使用
rem
代替em
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.