我是网页设计的新手，我正在尝试为网页创建标题。但是，我似乎在它上面有一点空白。我已经尝试在我的文档中添加规范化样式表，并将 html、正文和标题元素的边距和填充设置为 0，但似乎没有任何效果。我怎样才能删除这个空白？
HTML
<html>
<head>
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
</head>
<body>
<header>
<a href="#">
<h1>Jason K</h1>
<h2>Bum</h2>
</a>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
<a href="#">
<img src="http://www.asi.it/files/images/1024X768_02_0.jpg" alt="New York">
<p>sample sample sample</p>
</a>
</li>
<li>
<a href="#">
<img src="http://oldweb.lbto.org/images/n891_1024x768.jpg" alt="Los Angeles">
<p>sample sample sample</p>
</a>
</li>
</ul>
</section>
</div>
</body>
</html>
CSS
html, body, header {
margin: 0;
padding: 0;
}
body {
background-color:#d7d7e8;
}
/*************************************************
NAV
*************************************************/
header {
width:100%;
float:left;
margin:0 0 30px 0;
background-color:cyan;
}
/**************************************************
PORTFOLIO PAGE
***************************************************/
#wrapper {
max-width:1550px;
margin:0px auto;
}
#gallery li {
width:30%;
float:left;
list-style:none;
margin:0% 10%;
}
img {
max-width:100%;
}
a img {
margin-bottom:-20px;
}
a p {
background-color:#ffffff;
text-align:center;
padding:5px;
border-radius:0 0 6px 6px;
}
li a, header a {
text-decoration:none;
color:#58585b;
}
最佳答案
这是一个由两部分组成的问题，有两个备选解决方案。
解决方案一:
首先，<h1> <header> 中的元素元素。 <强> h1 元素有一个固有的 margin-top和 margin-bottom 16 像素。
二、float: left;导致你的标题向下移动。删除 float: left;来自 header {}并将其添加到您的 CSS 中，使您的标题与页面顶部齐平:
header h1 {
margin-top: 0px;
}
例子:
header h1 {
margin-top: 0px;
}
html, body, header {
margin: 0;
padding: 0;
}
body {
background-color:#d7d7e8;
}
/*************************************************
NAV
*************************************************/
header {
width:100%;
margin:0 0 30px 0;
background-color:cyan;
}
/**************************************************
PORTFOLIO PAGE
***************************************************/
#wrapper {
max-width:1550px;
margin:0px auto;
}
#gallery li {
width:30%;
float:left;
list-style:none;
margin:0% 10%;
}
img {
max-width:100%;
}
a img {
margin-bottom:-20px;
}
a p {
background-color:#ffffff;
text-align:center;
padding:5px;
border-radius:0 0 6px 6px;
}
li a, header a {
text-decoration:none;
color:#58585b;
}<header>
<a href="#">
<h1>Jason K</h1>
<h2>Bum</h2>
</a>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
<a href="#">
<img src="http://www.asi.it/files/images/1024X768_02_0.jpg" alt="New York">
<p>sample sample sample</p>
</a>
</li>
<li>
<a href="#">
<img src="http://oldweb.lbto.org/images/n891_1024x768.jpg" alt="Los Angeles">
<p>sample sample sample</p>
</a>
</li>
</ul>
</section>
</div>方案二:
或者，您可以留下 float: left;并删除 margin-top来自 ul 元素，它在顶部和底部也有 16px 的固有边距。添加这个:
header h1, #gallery {
margin-top: 0;
}
您将获得与解决方案 1 相同的效果。
您应该避免使用通用选择器，因为这会导致意想不到的后果，更不用说通用选择器非常慢的事实了。互联网上有一小部分关于使用 * {} 的危险的文献。适用于任何东西，尤其是作为 CSS 重置工具。
关于html - margin : 0; is not setting margin to 0，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29665047/