gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 07:25:37 25 4
gpt4 key购买 nike

只是想了解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
enter image description here
我期望 html 的高度为 18px + margins(8px + 8px) = 34px。但实际高度是50px。是什么导致了额外的高度。
enter image description here

最佳答案

您需要考虑边距折叠以找到高度。
在您的情况下,您已将默认 margin 应用于 p等于 1em所以16px在你的情况下。主体的边距也等于 8px但自从 16px更大,因此它将获胜(由于 margin 崩溃)。所以html的高度等于

16px + 16px + height of p element
p的高度元素取决于内容和 font-size .在您的情况下,它是 18px所以你的总数 50px body 的高度只会是 18px因为由于边距塌陷,所有边距都在外面。

更多详情:
How to determine height of content-box of a block and inline element (获取有关 p 高度计算的更多详细信息)
https://www.w3.org/TR/CSS2/box.html#collapsing-margins

关于html - 为什么 html 和 body 标签的高度不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68233701/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com