Question

我认为最好在一个例子中展示我想要实现的目标：

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未定位在屏幕边缘旁边，因为8px已应用body页边距。我希望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>

有什么比这更好的方法吗？

Answer 1

根据我的最后解决方案是最好的，因为这是自然的方式，如果你想给其他内容填充，那么你可以使用div，在大多数网站，你会看到所有专业人士关注这一点。

Answer 2

您可以将margin: -8px -8px 0 -8px;添加到标题元素

Answer 3

如果您已经知道正文使用的保证金为8px，您可以尝试以下操作：

header {
    background-color:blue;
    margin-left: -8px;
}

在这里试试https://jsfiddle.net/h1uhfzv2/3/

如何将元素放在屏幕边缘旁边？

3 个答案: