我认为最好通过示例展示我想要实现的目标:
header {
background-color:blue;
}<body>
<header>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</header>
<main>
Sed ullamcorper ligula sapien, eget congue risus iaculis eget. Etiam nunc diam, hendrerit nec nisi non, tristique feugiat risus. Donec maximus enim lacus, eget iaculis lectus aliquam non. Aenean id egestas justo, vitae placerat nulla. Suspendisse a tempor ipsum. Donec condimentum varius diam. Praesent mollis tincidunt nibh, sit amet euismod lacus mollis et. Nulla in condimentum elit. Quisque eu hendrerit nunc, id auctor risus.
</main>
</body>如您所见，这个蓝色的 header 没有紧靠屏幕边缘，因为 body 应用了 8px 边距.我希望 header 忽略这个边距，而 main 仍然保留它。
我可以看到三种实现他的方法:
给 header position:absolute;
但这没有为后续文本留下空间:
header {
background-color:blue;
position:absolute;
top:0px;
left:0px;
}<body>
<header>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</header>
<main>
Sed ullamcorper ligula sapien, eget congue risus iaculis eget. Etiam nunc diam, hendrerit nec nisi non, tristique feugiat risus. Donec maximus enim lacus, eget iaculis lectus aliquam non. Aenean id egestas justo, vitae placerat nulla. Suspendisse a tempor ipsum. Donec condimentum varius diam. Praesent mollis tincidunt nibh, sit amet euismod lacus mollis et. Nulla in condimentum elit. Quisque eu hendrerit nunc, id auctor risus.
</main>
</body>我必须手动将 main 向下移动，以便为 header 留出空间。但是我怎么知道 header 需要多少空间，尤其是在调整屏幕大小并且开始段落换行的情况下？
给出 header position:relative; 并取反边距。
这很接近:
header {
background-color:blue;
position:relative;
top:-8px;
left:-8px;
margin-right:-16px;
}<body>
<header>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</header>
<main>
Sed ullamcorper ligula sapien, eget congue risus iaculis eget. Etiam nunc diam, hendrerit nec nisi non, tristique feugiat risus. Donec maximus enim lacus, eget iaculis lectus aliquam non. Aenean id egestas justo, vitae placerat nulla. Suspendisse a tempor ipsum. Donec condimentum varius diam. Praesent mollis tincidunt nibh, sit amet euismod lacus mollis et. Nulla in condimentum elit. Quisque eu hendrerit nunc, id auctor risus.
</main>
</body>但是做这样的事情是一种好的风格吗？另外，我可以确定所有浏览器都为 body 提供了恰好 8px 的边距吗？
移除 body 的边距并手动将其赋予所有后续元素。
可能是最接近的:
body {
margin: 0px;
}
header {
background-color:blue;
}
main {
margin: 8px;
}<body>
<header>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</header>
<main>
Sed ullamcorper ligula sapien, eget congue risus iaculis eget. Etiam nunc diam, hendrerit nec nisi non, tristique feugiat risus. Donec maximus enim lacus, eget iaculis lectus aliquam non. Aenean id egestas justo, vitae placerat nulla. Suspendisse a tempor ipsum. Donec condimentum varius diam. Praesent mollis tincidunt nibh, sit amet euismod lacus mollis et. Nulla in condimentum elit. Quisque eu hendrerit nunc, id auctor risus.
</main>
</body>还有比这更好的方法吗？
最佳答案
您可以将 margin: -8px -8px 0 -8px; 添加到您的标题元素
关于html - 如何将元素放置在屏幕边缘旁边？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42765468/