Question

我已经在其中使用了html5标头标签和h1标签。在我的标题中的h1元素的上边距属性设置为0px后，我设法删除标题的上边距，但我希望我的标题内的h1元素具有大约15px的上边距。

现在，当我尝试设置h1元素的上边距时，它还会为我不想要的标题创建一个上边距。

有人可以帮我解决这个问题吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link href="normalize.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">

    <title>Codename : ENT</title>
</head>
<body>
    <header>
        <h1>Site Title / LOGO</h1>
        <p>Site Tagline / Slogan / One liner.</p>
        <p></p>
        <nav></nav>
    </header>
    <div id="content_wrapper"></div>
    <footer>
    </footer>
</body>
</html>

和CSS

header {
    background-color:#ff0
}

header h1 {
    margin-top:0;
    margin-left:15px
}

header p {
    margin-left:15px
}

Answer 1

padding-top或h1使用header或overflow:hidden使用header

Answer 2

您在此处遇到的问题是致电collapsing margins

以下摘自this mozilla article：

父母和第一个/最后一个孩子

如果没有边框，填充，内联内容或间隙   将块的边缘顶部与其第一个边缘顶部分开   子块，或没有边框，填充，内联内容，高度，   min-height或max-height分隔块的边距底部   在最后一个孩子的边缘底部，那些边缘崩溃了。   折叠的保证金最终在父母之外。

所以我可以通过在标题元素中添加边框来解决这个问题 - DEMO

header { border: 1px solid transparent; }

或通过清晰度 - DEMO

header { overflow: hidden; }

或添加填充 - DEMO

header { padding: 1px; }

......等等

Answer 3

将padding-top: 15px;添加到h1的属性中。

Answer 4

尝试这个

header h1 {
    padding-top:15px;
    margin-top:0;
    margin-left:15px
}

Answer 5

正如所提到的那样，你真正想要的是填充顶部，而不是边缘顶部。

这两者之间的区别很容易理解，基本上填充在元素内部，而边距在元素之外，本教程的最后两个例子显示它相当好 http://html.net/tutorials/css/lesson10.php

因此，对于您的代码，header元素是容器，添加margin-top:15px会将元素向下移动15px，这意味着整个容器（包括黄色背景）位于较低位置。添加padding-top:15px，将标题元素的高度增加15px，添加到元素的顶部，然后向下移动内容，在顶部留下15px的黄色间隙。

Answer 6

<强> Demo

CSS

header {
    background-color:#ff0;
    margin:0;
    display: inline-block; /* add this to make it inline as <header> id block element by default */ 
    width: 100%; /* for 100% width */
}
header h1 {
    margin-top:15px;
    margin-left:15px
}
header p {
    margin-left:15px
}

设置标题中h1元素的上边距不能按预期工作

6 个答案: