我如何摆脱这个空间？ [复制]答案

【问题标题】：How do I get rid of this space? [duplicate]我如何摆脱这个空间？ [复制]
【发布时间】：2017-07-17 06:01:17
【问题描述】：

我是一名从事 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>

【问题讨论】：

position:inline 不是一个东西。此外，您的标题有 padding;0 应该是 padding:0 考虑使用语法荧光笔
嘿@James Vivian，我想你的意思是display:inline; 代表header {...}。不是position: inline;。

标签： html css

【解决方案1】：

我建议使用语法荧光笔在旅途中发现代码中的拼写错误。你那里有几个。

我清除了一些冗余代码。

导致差距的是ul元素的margins。您需要重置一些浏览器默认设置

我在代码中添加了 cmets。

我想这就是你想要的。

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>

【讨论】：

【解决方案2】：

您可以添加下面的 css 以消除页面顶部的空白。

见Fiddle Demo

CSS：

header nav ul {
    margin-top: 0;
}

【讨论】：

【解决方案3】：

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%;
}

<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>

【讨论】：