设置标题中h1元素的上边距不能按预期工作
[英]setting the top margin of the h1 element in the header does not work as expected
问题描述
I have made use of the html5 header tag and an h1 tag within it. 
我已经使用了html5标头标签和h1标签。 After setting up the top margin property of the h1 element in my header to 0px, i manage to remove the top margin of the header, but i want the h1 element inside my header to have a top margin of around 15px. 在我的标题中的h1元素的上边距属性设置为0px后，我设法删除标题的上边距，但我希望我的标题内的h1元素具有大约15px的上边距。
Now when i try setting the top margin of the h1 element, it also creates a top margin for the header which i don't want. 现在，当我尝试设置h1元素的上边距时，它还会为我不想要的标题创建一个上边距。
Can someone help me out with this...? 有人可以帮我解决这个问题吗？
<!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>
and CSS 和CSS
header {
background-color:#ff0
}
header h1 {
margin-top:0;
margin-left:15px
}
header p {
margin-left:15px
}
6 个解决方案
解决方案1
7 已采纳 2014-08-04 08:08:35
对于h1或header使用padding-top或使用overflow:hidden作为header
解决方案2
5 2014-08-04 08:24:37
The issue you are facing here is call collapsing margins 您在这里面临的问题是调用折叠边距
Here is an excerpt from this mozilla article : 以下是这篇mozilla文章的摘录：
Parent and first/last child
If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse.
So I could fix this by adding a border to the header element - DEMO 所以我可以通过在标题元素 - DEMO中添加边框来解决这个问题
header {
border: 1px solid transparent;
}
or by clearence - DEMO 或者通过清除 - DEMO
header {
overflow: hidden;
}
or by adding padding - DEMO 或者通过添加填充 - DEMO
header {
padding: 1px;
}
... etc etc ......等等
解决方案3
2 2014-08-04 08:17:25
As mentioned is every other answer, what you actually want is padding-top, not margin-top. 正如前面提到的那样，你真正想要的是填充顶部，而不是边缘顶部。
The difference between these two is pretty easy to understand, essentially padding is inside the element, and margin is outside the element, the last two examples from this tutorial show it fairly well http://html.net/tutorials/css/lesson10.php 这两者之间的区别很容易理解，基本上填充在元素内部，而边距在元素之外，本教程的最后两个例子显示它相当好http://html.net/tutorials/css/lesson10。 PHP
So with your code, the header element is the container, adding margin-top:15px will move the element down 15px, meaning the whole container, yellow background included, sits lower. 因此，对于您的代码，header元素是容器，添加margin-top:15px将元素向下移动15px，这意味着整个容器，包括黄色背景，位于较低位置。 Adding padding-top:15px with increase the height of the header element by 15px, by adding to the top of the element, and moving the content down, leaving a yellow gap of 15px at the top. 添加padding-top:15px ，将标题元素的高度增加15px，添加到元素的顶部，然后向下移动内容，在顶部留下15px的黄色间隙。
解决方案4
1 2014-08-04 08:09:59
Add padding-top: 15px; 添加padding-top: 15px; to the properties of h1 . 到h1的属性。
解决方案5
1 2014-08-04 08:11:57
try this one 试试这个
header h1 {
padding-top:15px;
margin-top:0;
margin-left:15px
}
解决方案6
1 2014-08-04 08:26:31
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.