Question

我是一名从事CSS和HTML工作的文凭专业的学生。我当前的页面差不多完成了，但我坚持一件事。标题/导航栏。如果我将它设置为内联，一切都排好，背景图像保持原样，但页面顶部有一个间隙。将其设置为固定修复但会抛出条形部分的对齐方式，背景图像最终位于标题下方。所有相关的边距都设置为0，出于绝望，我试图扩大条形，它没有摆脱空间。请有人告诉我如何解决这个问题？这是我的代码：

body {

margin: 0;
padding: 0;
width: 100%;
background: url("images/background.jpg") no-repeat center center fixed; 
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-color: rgb(153,145,122); 
background: -webkit-linear-gradient(left, aqua , mediumslateblue); 
background: -o-linear-gradient(right, aqua, mediumslateblue);
background: -moz-linear-gradient(right, aqua, mediumslateblue); 
background: linear-gradient(to right, aqua , mediumslateblue);
font: 1em Verdana, sans-serif;
} 

header{
position: inline;
width: 100%;
margin: 0 auto;
margin-top: 0px;
padding; 0;
height: 40px;
background-color: black;
}

.logo {
color: white;
float: left;
margin-top: 10px;
margin-left: 10px;

}
.nav { 
float: right;

color: white;  
margin: 0; 
margin-top: 0;


}

.banner {
background: url("images/background.jpg") no-repeat center center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
height: 200px;
width: 100%;
}

<html>
<head>
    <meta charset="utf-8">
    <meta name="Author" content="James Vivian">
    <meta name="Original Filename" content="index">
    <meta name="Date Created" content="8/6/2017">
    <meta name="Version" content="Version 1">
    <title>Photography Masters</title>
    <link rel="stylesheet" type="text/css" href="Styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

   <header>
       <div class="logo">Photography Masters</div>
   <nav>

   <ul>
      <li><a href="#link"> About</a></li>
      <li><a href="#link"> Contact</a></li>
      <li><a href="#link"> Gallery</a></li>
      <li><a href="#link"> Services</a></li>
   </ul>
    </nav>
  </header>
  </body>
  </html>

Answer 1

您可以在页面顶部添加以下css以消除间隙。

请参阅Fiddle Demo

CSS：

header nav ul {
    margin-top: 0;
}

Answer 2

＆＃13;

body {

margin: 0;
padding; 0;
width: 100%;
background: url("images/background.jpg") no-repeat center center fixed; 
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-color: rgb(153,145,122); 
background: -webkit-linear-gradient(left, aqua , mediumslateblue); 
background: -o-linear-gradient(right, aqua, mediumslateblue);
background: -moz-linear-gradient(right, aqua, mediumslateblue); 
background: linear-gradient(to right, aqua , mediumslateblue);
font: 1em Verdana, sans-serif;
} 

header{
position: inline;
width: 100%;
margin: 0 auto;
margin-top: 0px;
padding; 0;
height: 40px;
background-color: black;
}

.logo {
color: white;
float: left;
margin-top: 10px;
margin-left: 10px;

}
.nav { 
float: right;

color: white;  
margin: 0; 
margin-top: 0;


}

header nav ul {
    margin-top: 0;
}

.banner {
background: url("images/background.jpg") no-repeat center center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
height: 200px;
width: 100%;
}

＆＃13;

<header>
       <div class="logo">Photography Masters</div>
   <nav>

   <ul>
      <li><a href="#link"> About</a></li>
      <li><a href="#link"> Contact</a></li>
      <li><a href="#link"> Gallery</a></li>
      <li><a href="#link"> Services</a></li>
       </ul>
    </nav>
  </header>

＆＃13;

Answer 3

我建议使用语法高亮显示器来随时查看代码中的拼写错误。那里有几个人。

我清理了一些冗余代码。

导致间隙的是margins元素的ul。您需要重置某些浏览器默认设置

我在代码中添加了评论。

我认为这就是你想要的。

body {
  margin: 0 auto;
  background-color: rgb(153, 145, 122);
  background: linear-gradient(to right, aqua, mediumslateblue), url("images/background.jpg") no-repeat center center fixed;
  background-size: cover;
  font: 1em Verdana, sans-serif;
}

header {
  margin: 0 auto;
  height: 40px;
  line-height: 40px; /* line height should match div height to align items in the middle in terms of height */ 
  background-color: black;
  color: white;
}

header a {color: white;}

.logo {
  float: left;
  margin-left: 10px;
}


ul {
  margin: 0 auto; /* this was the cause of the gap. You need to reset default margins for ul elements */
  margin-right: 5px
}

nav ul li {
  display: inline; /* make menu items go side by side */
  float: right;
  padding: 0 5px /* add padding between menu items but not above and below them */
}

.banner {
  background: url("images/background.jpg") no-repeat center center;
  background-size: cover;
  height: 200px;
  width: 100%;
}

<header>
    <div class="logo">Photography Masters</div>
    <nav>
      <ul>
        <li><a href="#link"> About</a></li>
        <li><a href="#link"> Contact</a></li>
        <li><a href="#link"> Gallery</a></li>
        <li><a href="#link"> Services</a></li>
      </ul>
    </nav>
</header>

我如何摆脱这个空间？

3 个答案: