如何删除div之间的空闲空间

时间:2018-06-12 13:13:41

标签: html css

我有四个div,一个在另一个下面,我不想要它们之间的空格。我试着写一些边距和填充,没有任何作用。没有边界,所以我不知道是什么造成了div之间的差距。



.logo {
  background-color: blue;
  height: 125px;
  margin-right: 25%;
  margin-left: 25%;
}

.nav {
  margin-right: 25%;
  margin-left: 25%;
}

.picture {
  margin-right: 25%;
  margin-left: 25%;
  background: yellow;
  height: 300px;
}

.aboutus {
  margin-right: 25%;
  margin-left: 25%;
  background: blue;
  height: 200px;
}

<body>

  <div class="logo">

    <p>logo</p>

  </div>


  <div class="nav">
    <ul>
      <li class="main"><a href="main.html">Domov</a></li>
      <li class="gallery"><a class="active" href="gallery.html">Galéria</a></li>
      <li class="contacts"><a href="contacts.html">Kontakt</a></li>
    </ul>
  </div>


  <div class="picture">

    <h1>picture</h1>

  </div>


  <div class="aboutus">

    <h1>about us</h1>

  </div>



</body>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:3)

乍一看,h1标签正在添加空间,请尝试以下方法:

h1 {
    margin: 0;
}

您还可以将div设置为overflow: auto;,如果您希望将间距保持在h1标记之上,则可以选择

.nav, .picture, .aboutus {
    overflow:auto;
}

在此处详细了解折叠边距:Collapsing margins

答案 1 :(得分:-1)

空间由h1的边距引起。以下代码行将修复它。

  h1
  {
    margin-top:0;
  }

https://jsfiddle.net/kwb0ygmd/

答案 2 :(得分:-2)

您需要从h1和ul标签中删除默认边距

h1, ul{
   margin: 0;
}

或者您可以使用https://meyerweb.com/eric/tools/css/reset/

等重置

&#13;
&#13;
.logo {
  background-color: blue;
  height: 125px;
  margin-right: 25%;
  margin-left: 25%;
}

.nav {
  margin-right: 25%;
  margin-left: 25%;
}

.picture {
  margin-right: 25%;
  margin-left: 25%;
  background: yellow;
  height: 300px;
}

.aboutus {
  margin-right: 25%;
  margin-left: 25%;
  background: blue;
  height: 200px;
}
h1, ul{
   margin: 0;
}
&#13;
<body>

  <div class="logo">

    <p>logo</p>

  </div>


  <div class="nav">
    <ul>
      <li class="main"><a href="main.html">Domov</a></li>
      <li class="gallery"><a class="active" href="gallery.html">Galéria</a></li>
      <li class="contacts"><a href="contacts.html">Kontakt</a></li>
    </ul>
  </div>


  <div class="picture">

    <h1>picture</h1>

  </div>


  <div class="aboutus">

    <h1>about us</h1>

  </div>



</body>
&#13;
&#13;
&#13;