Question

在下面的代码中，margins和p上的h2是否以font-size为参考点？

margin上的padding和div.contact怎么样？他们的参考点是什么？是身体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。（Imo你不应该在你的脑海中将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 */
}

希望这会对你有所帮助。

Answer 2

在div.contact 1em来自当前div的字体大小，这种情况意味着100%中声明body。

另一种情况：

<style>
    body {font-size: 100%:}
    #wrapper {font-size: 120%;}
    .contact {margin: 1em} /* 1em regarding font-size 120% */
</style>

<div id=wrapper>
    <div class=contact>contact</div>
</div>

边距和填充中的em是否将字体大小作为参考点？

2 个答案: