html - 为什么html和body标签的高度不同

问题描述

只是想了解html标签的高度是如何确定的。（特别是在 chrome 中）我正在使用这个示例 html。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Hello</p>
</body>
</html>

身体高度为18px

我期望 html 的高度为 18px + margins(8px + 8px) = 34px。但实际高度是50px。是什么导致了额外的高度。

标签： htmlcss

您需要考虑边距折叠以找到高度。

在您的情况下，在您的情况下，您应用的默认边距p等于1emso 16px。主体的边距也等于，8px但由于16px更大，所以它将获胜（由于边距崩溃）。所以html的高度等于

16px + 16px + height of p element

元素的高度p取决于内容和font-size。在你的情况下，18px你有你的总数50px

body 的高度只会18px因为边距折叠而导致所有边距都在外面。

更多详情：

如何确定块和内联元素的内容框的高度（获取有关高度计算的更多详细信息p）

https://www.w3.org/TR/CSS2/box.html#collapsing-margins

html - 为什么html和body标签的高度不同

问题描述

解决方案

推荐阅读