我试图创建一个没有滚动条的全屏网站，并且在定义边距时遇到问题。给出的是一个最小的例子：
html {
margin: 0;
padding: 0;
height: 100%;
background: yellow;
}
body {
margin: 0;
padding: 0;
height: 100%;
max-height: 100%;
background: green;
}
h1 {
background: gray;
} <body>
<h1>Heading 1</h1>
</body>为什么html在侧面顶部出现元素的黄色背景？更令我惊讶的是，如果我在h1元素之前添加文本，则黄色部分消失了。
html {
margin: 0;
padding: 0;
height: 100%;
background: yellow;
}
body {
margin: 0;
padding: 0;
height: 100%;
max-height: 100%;
background: green;
}
h1 {
background: gray;
} <body>
Add some text and the yellow part disappears.
<h1>Heading 1</h1>
</body>有什么想法可以避免在标题元素之前不添加文本的情况下避免顶部的黄色部分？
body正如所包含的h1元素一样，您的元素是一个非浮动的块元素。因此，body元素的大小/位置适应其子元素h1，其子元素的边距（margin-top）定义为默认值。
对于您的问题，有多种解决方案，一种是使身体元素漂浮。这样做的优点是（与插入h1上的边距相比），即使插入了带有边距的其他元素，我也将以相同的方式工作。
html {
margin: 0;
padding: 0;
height: 100%;
background: yellow;
}
body {
margin: 0;
padding: 0;
height: 100%;
max-height: 100%;
background: green;
float: left;
width: 100%;
}
h1 {
background: gray;
}<body>
<h1>Heading 1</h1>
</body>html {
margin: 0;
padding: 0;
height: 100%;
background: yellow;
}
body {
margin: 0;
padding: 0;
height: 100%;
max-height: 100%;
background: green;
float: left;
width: 100%;
}
h1 {
background: gray;
}<body>
<h1>Heading 1</h1>
</body>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句