【问题标题】:How to remove the gap between div in html/css?如何消除 html/css 中 div 之间的差距?
【发布时间】:2017-12-11 20:46:29
【问题描述】:

在我的网页中,div 之间存在未知间隙,并且导航栏顶部有一个空白区域。我已经将body的margin和padding设置为0,但问题依旧存在。

我知道有a similar post,但我认为该帖子中没有提到任何解决方案。另外,如您所见,我在负值中添加了 margin-top 以消除导航栏上的未知空间,但这是一种低效的方法。

谁能帮我解决这个问题?

代码如下:

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%;
}
<!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 这没有意义!
  • 覆盖浏览器默认的ul样式。
  • 添加了完整的 CSS @MhdAlaaAlhaj
  • 检查您发布的代码,没有空格。因此尝试添加所有影响 CSS。

标签: html css


【解决方案1】:

这是因为您的 &lt;ul&gt; 元素的边距和填充

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>

【讨论】:

  • 这可以帮助我消除导航栏顶部的空白,但是你好部分呢?每个 div 之间仍然存在差距,我不知道它为什么会出现。
  • 您可以做的就是按 f12 打开检查器并将所有元素指向检查器。您将获得有关需要删除的所有元素的填充和边距的所有信息
【解决方案2】:

试试这个

而不是

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

这会给 p 标签留出余量

p{
  margin-top:-17px;
  }

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

【讨论】:

    【解决方案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 中的 body 更改为 *.

    【讨论】: