Question

所以我想创建一个网络教程页面只是为了帮助我的技能，我似乎无法弄清楚为什么导航栏的底部和我的第一个标题的顶部之间有空格？如果有人能告诉我我写的内容会将这两个内容分开，这将是惊人的！

body{
	margin: 0;
	padding: 0;
	background: #cccccc;
}
.nav ul{
	list-style: none;
	background-color: #444444;
	text-align: center;
	padding: 0;
	margin: 0;
}
.nav li{
	font-family: 'Oswald'. sans-serif;
	font-size: 1.2em;
	line-height: 40px;
	height: 40px;
	border-bottom: 1px solid #888888;
	
}
.nav a{
	text-decoration: none;
	color: #ffffff;
	display: block;
}
.nav a:hover{
	background-color: #005f5f;
	transition: .3s background-color;
}
.nav a.active{
	background-color: #ffffff;
	color: #444444;
	cursor: default;
}
@media screen and (min-width: 600px){
	.nav li{
		width: 120px;
		border-bottom: none;
		height: 50px;
		line-height: 50px;
		font-size: 1.4em;
		display: inline-block;
		margin-right: -4px;
	}
}
.header{
	background-color: blue;
	height: 70px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Responsive design -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Web Tutorials - Making web development easier!</title>

    <!-- Custom Css -->
    <link href="style.css" rel="stylesheet">
	
	
</head>
<body>
    <div class="nav">
      <ul>
        <li class="home"><a class="active" href="#">HOME</a></li>
        <li class="tutorials"><a href="#">HTML</a></li>
        <li class="about"><a href="#">CSS</a></li>
        <li class="contact"><a href="#">CONTACT</a></li>
      </ul>
    </div>
	<div class="header">
		<h1>Welcome to Web Tuts</h1>
	</div>
</body>
</html>

Answer 1

这是因为h1元素具有由浏览器的用户代理样式表设置的默认边距。

<div class="header">
    <h1>Welcome to Web Tuts</h1>
</div>

您必须删除此边距。

.header h1 {
    margin-top: 0;
}

强制性CSS reset link。

body {
  margin: 0;
  padding: 0;
  background: #cccccc;
}
.header h1 {
  margin-top: 0;
}
.nav ul {
  list-style: none;
  background-color: #444444;
  text-align: center;
  padding: 0;
  margin: 0;
}
.nav li {
  font-family: 'Oswald'. sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  height: 40px;
  border-bottom: 1px solid #888888;
}
.nav a {
  text-decoration: none;
  color: #ffffff;
  display: block;
}
.nav a:hover {
  background-color: #005f5f;
  transition: .3s background-color;
}
.nav a.active {
  background-color: #ffffff;
  color: #444444;
  cursor: default;
}
@media screen and (min-width: 600px) {
  .nav li {
    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
    display: inline-block;
    margin-right: -4px;
  }
}
.header {
  background-color: blue;
  height: 70px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Responsive design -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Web Tutorials - Making web development easier!</title>

  <!-- Custom Css -->
  <link href="style.css" rel="stylesheet">


</head>

<body>
  <div class="nav">
    <ul>
      <li class="home"><a class="active" href="#">HOME</a>
      </li>
      <li class="tutorials"><a href="#">HTML</a>
      </li>
      <li class="about"><a href="#">CSS</a>
      </li>
      <li class="contact"><a href="#">CONTACT</a>
      </li>
    </ul>
  </div>
  <div class="header">
    <h1>Welcome to Web Tuts</h1>
  </div>
</body>

</html>

Answer 2

要解决这个小问题很简单，使用全局重置框架也很容易。我建议你，你应该研究基本的默认浏览器样式表规则，这将把你的CSS技能提升到一个新的水平。

你基本上可以阅读所有内容：

Mozilla Firefox等 http://hg.mozilla.org/mozilla-central/file/tip/layout/style/html.css

Apple Safari等http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

它们非常相似，我建议首先阅读Mozilla。我们不必记住所有这些，只有最常见的就足够了，例如标题，段落，列表和块引用等。

Answer 3

的CSS：

h1
{
margin:0;
}

h1标记中有自动边距，您需要将其设为0

Answer 4

希望以上解决了这个问题。

只是想跟进询问您是否习惯使用网络检查工具。

有时你可以尝试一百万件没有运气的东西，但检查一下这个区域就会跳出来。这样的故障排除问题在检查员中更容易实现。

我非常喜欢Chrome中内置的内容，但每个人都有偏好。

TeamTreehouse.com博客上的

This文章是一个非常好的介绍！

导航栏和标题之间的空格？

4 个答案: