html heightこの要素のは47pxです。
body {
line-height: 20px;
margin: 8px;
display: flow-root;
}
.div {
margin-top: 11px;
margin-bottom: 10px;
}<html>
<body>
I am a body
<div class="div">
</div>
</body>
</html>これは次の理由によるものです：
マージン-本体の上部は8pxです。line-heightは20pxで、テキストは1行だけです。bodyのblock-formatting-contextは、divs 11pxがbody's margin-bottomで折りたたまれないためbody、11px拡大することを意味します。bodyのmargin-bottomは、8pxを追加して展開しhtmlます。これで合計47pxになります。
このサイトをblock-formatting-context（BFC）はmargin-bottom-collapsingに影響しないと解釈したので、最初は、margin-bottomが' smargin-bottomでdiv折りたたまれると思いました。body
<div></div>コンテンツがなく、折りたたまれて上部マージン= 11pxのみを認識しますしたがって、20 + 16 + 11 = 47px
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加