css - em in margin 和 padding 是否以字体大小为引用点？

Question

在下面的代码中，p和h2上的margins以各自的font-size为引用点？

div.contact 上的margin 和padding 怎么样？他们将引用点作为什么？是正文 font-size 吗？

body { font-size: 100%; }
p { font-size: 1em; margin-bottom:0.5em; }
h2 { font-size: 2em; margin-bottm:1em; }
div.contact { margin: 1.5em 0; padding: 0 0.7em; }

Answer 1

是的，ems 中的边距和填充是基于父字体大小的。

假设您有这个标记:

<div class="contact">
    <h2>Heading</h2>
    <p>Paragraph</p>
</div>

您的主体字体大小为 100%，因此它是浏览器的标准字体大小，为简单起见，我们假设为 16px。 (我不应该在你的脑海中将 em 转换为 px，而是将你的思维方式改变为基于 em 的。只是为了帮助你理解我确实在下面的代码中将其转换)

对于 div.contact 这意味着:

div.contact { 
   margin: 1.5em 0; /* 16 x 1.5 = 24px */
   padding: 0 0.7em; /* 16 x 0.7 = 11.2px */
}

对于 h2 这意味着:

h2 {
   font-size: 2em; /* 16 x 2 = 32px */
   margin-bottm:1em; /* 16 x 2 x 1 = 32px */
}

例如，如果您将字体大小从 .contact 更改为 1.2em，这将会发生:

div.contact { 
   font-size: 1.5em; /* 16 x 1.2 = 19.2px */
   margin: 1.5em 0; /* 16 x 1.2 x 1.5 = 28.8px */
   padding: 0 0.7em; /* 16 x 1.2 x 0.7 = 13.44px */
}
h2 {
   font-size: 2em; /* 16 x 1.2 x 2 = 38.4px */
   margin-bottm:1em; /* 16 x 1.2 x 2 x 1 = 38.4px */
}

希望对你有帮助。