block 元素，在另一个 block 内。第一个 block 的高度为 200px，因此根据 CSS 规范，内部 block 的总边距 + 填充 + 边框 + 高度应为 200px。所以在 google chrome web developer tools 中，顶部和底部的边距只有 16 px，总高度 + 填充 + 边距大约是 134。有什么解释吗？
<html>
<div style="height: 200px;border:1px solid black;">
<p style="height: 50%; border:1px solid black;"></p>
</div>
</script>
</html>
最佳答案
我觉得你误会了the spec . 200px 默认是 content-box，不包括 padding 或 border。所以 p 的数学是 200px 的 50% = 100px 内容框高度，然后添加 1px border 两次加上 16px margin 两次(根据您的说法)，给出 134px 的值。
关于html - CSS block 高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14106431/