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

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

对于h1或header使用padding-top或使用overflow:hidden作为header

Answer 2

您在这里面临的问题是调用折叠边距

以下是这篇mozilla文章的摘录：

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

如果没有边框，填充，内联内容或间隙将块的边距顶部与其第一个子块的边距顶部分开，或者没有边框，填充，内联内容，高度，最小高度或最大值 - 高度将块的边缘底部与其最后一个子节点的边缘底部分开，然后这些边距崩溃。 折叠的保证金最终在父母之外 。

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

header {
    border: 1px solid transparent;
}

或者通过清除 - DEMO

header {
    overflow: hidden;
}

或者通过添加填充 - DEMO

header {
    padding: 1px;
}

......等等

Answer 3

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

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

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

Answer 4

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

Answer 5

试试这个

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

Answer 6

演示

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 个解决方案

解决方案1
7 已采纳 2014-08-04 08:08:35

解决方案2
5 2014-08-04 08:24:37

解决方案3
2 2014-08-04 08:17:25

解决方案4
1 2014-08-04 08:09:59

解决方案5
1 2014-08-04 08:11:57

解决方案6
1 2014-08-04 08:26:31

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

问题描述

6 个解决方案

解决方案1 7 已采纳 2014-08-04 08:08:35

解决方案2 5 2014-08-04 08:24:37

解决方案3 2 2014-08-04 08:17:25

解决方案4 1 2014-08-04 08:09:59

解决方案5 1 2014-08-04 08:11:57

解决方案6 1 2014-08-04 08:26:31

解决方案1
7 已采纳 2014-08-04 08:08:35

解决方案2
5 2014-08-04 08:24:37

解决方案3
2 2014-08-04 08:17:25

解决方案4
1 2014-08-04 08:09:59

解决方案5
1 2014-08-04 08:11:57

解决方案6
1 2014-08-04 08:26:31