Question

在我的网页中，div之间存在未知的差距，导航栏顶部有一个空白区域。我已将主体的边距和填充设置为0，但问题仍然存在。

我知道有a similar post，但我认为该帖中没有提到任何解决方案。此外，正如您所看到的，我将margin-top添加到负值以消除导航栏中的未知空间，但这是一种低效的方式。

有人可以帮我解决这个问题吗？

以下是代码：

＆＃13;

html {
  background: url(images/bg.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
  margin: 0;
  border: 0;
  padding: 0;
}

header {
  margin-top: -17px;
  background: #007400;
}

#header_inner {
    width: 90%;
    margin: 0 auto;
    font-weight: 300;
}

header::after {
    content: "";
    display: table;
    clear: both;
}

.menu {
    float: right;
    color: #eeeeee;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 15px;
}

.header2 {
    margin: 0;
    padding: 0;
    list-style: none;
}

.header2 li {
    display: inline-block;
    margin-left: 40px;
    padding-top: 23px;
    position: relative;
}

nav a:hover {
    color: #fff;
}

nav a:before {
    content: "";
    display: block;
    height: 5px;
    background-color: #fff;
    position: absolute;
    top: 0;
    width: 0%;
    transition: all ease-in-out 200ms;
}

nav a:hover::before {
    width: 100%;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <link href="css/jquery.bxslider.css" rel="stylesheet" />
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <title>Home Page</title>
</head>

<body>
  <header>
    <div id="header_inner">
      <a href="home_page.html"></a>
      <nav class="menu">
        <a href="#" id="menu_icon"></a>
        <ul class="header2">
          <li><a href="home_page.html" class="current">Home</a></li>
          <li><a href="#">Profile</a></li>
          <li><a href="#">Career</a></li>
          <li><a href="#">Logout</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <p>hello</p>
</body>

</html>

＆＃13;

Answer 1

这是因为<ul>元素的边距和填充

html {
  background: url(images/bg.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
  margin: 0;
  border: 0;
  padding: 0;
}

ul {
    padding: 0;
    margin: 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <link href="css/jquery.bxslider.css" rel="stylesheet" />
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <title>Home Page</title>
</head>

<body>
  <header>
    <div id="header_inner">
      <a href="home_page.html"></a>
      <nav class="menu">
        <a href="#" id="menu_icon"></a>
        <ul class="header2">
          <li><a href="home_page.html" class="current">Home</a></li>
          <li><a href="#">Profile</a></li>
          <li><a href="#">Career</a></li>
          <li><a href="#">Logout</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <p>hello</p>
</body>

</html>

Answer 2

尝试这个

而不是

header {
 // margin-top: -17px;
}

这为p标签提供了保证金

p{
  margin-top:-17px;
  }

＆＃13;

html {
  background: url(images/bg.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
  margin: 0;
  border: 0;
  padding: 0;
}

header {
  // margin-top: -17px;
}

p {
  margin-top: -17px;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <link href="css/jquery.bxslider.css" rel="stylesheet" />
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <title>Home Page</title>
</head>

<body>
  <header>
    <div id="header_inner">
      <a href="home_page.html"></a>
      <nav class="menu">
        <a href="#" id="menu_icon"></a>
        <ul class="header2">
          <li><a href="home_page.html" class="current">Home</a></li>
          <li><a href="#">Profile</a></li>
          <li><a href="#">Career</a></li>
          <li><a href="#">Logout</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <p>hello</p>
</body>

</html>

＆＃13;

Answer 3

html {
  background: url(images/bg.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

* {
  margin: 0;
  border: 0;
  padding: 0;
}

ul {
    padding: 0;
    margin: 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <link href="css/jquery.bxslider.css" rel="stylesheet" />
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <title>Home Page</title>
</head>

<body>
  <header>
    <div id="header_inner">
      <a href="home_page.html"></a>
      <nav class="menu">
        <a href="#" id="menu_icon"></a>
        <ul class="header2">
          <li><a href="home_page.html" class="current">Home</a></li>
          <li><a href="#">Profile</a></li>
          <li><a href="#">Career</a></li>
          <li><a href="#">Logout</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <p>hello</p>
</body>

</html>

我想出了你用css将身体改为*的答案。

如何消除html / css中div之间的差距？

3 个答案: