Question

我有以下问题。我想在文章部分中有标题（位置：固定）和一些文本，并在此之间划分一些空格。

我的CSS代码：

header 
{
    position: fixed

    margin-bottom: 10px; // <-- space I'd like to have
}

我的HTML代码：

<body>
<header> HEADER </header>

<article> SAMPLE TEXT</article>
</body>

但现在它看起来像标题和文章是重叠的。

http://jsfiddle.net/LvKSm/embedded/result/

那么如何在这个部分之间留出这个空间/边距？

Answer 1

您需要在margin代码

上使用article

header {
    background: #ddd;
    position: fixed;
    top: 0;
    /* width: 100%; */ /* You would probably need this */ 
}

article {
    margin-top: 50px;
}

Demo

Demo （您创建的小提琴的更新演示版）

一些解释，您在margin-bottom标记上使用header，这是一个fixed position元素，现在当您进行任何元素修复时，它就会脱离文档流程，您的margin不会对文档中的任何元素产生任何影响。

另外请记得对top: 0;元素使用header，或者在margin-top上使用article时，也会使用header元素。< / p>

P.S使用//进行评论无效，您需要使用/* Comment goes here */

Answer 2

This可能就是你想要的。您需要在header后面的元素上设置一个余量，其值等于标题+ 10.您必须这样做，因为元素header的位置fixed“已删除“它来自文档的自然流程，即它将位于其余内容的顶部，而其他内容则忽略它。因此，article会忽略标题的位置并占据其位置。

header {
    position: fixed;
    height: 100px;
    width: 100%;
    background: red;
    top: 0;
}

article {
    width: 100%;
    margin-top: 110px; /* height header + 10px */
    background: blue;
}

如果标题的高度是动态的，您可以使用jQuery（或JS）设置文章的margin-top。 Fiddle

$("article").css({
    "margin-top": $("header").height() + 10
});

编辑：我编辑了您的Fiddle，现在效果很好。

Answer 3

这里最好的做法是在你的身体标签上涂抹衬垫。 SEE THE DEMO

body {padding-top: 120px;}

同时也不要忘记将top: 0;提供给header标记，因为它有固定的位置，这也是为什么margin-bottom不适合它的原因。

空间<article> <header>位置已修复</header> </article>

3 个答案: