Question

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

＆＃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;
}

＆＃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;

Answer 1

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

h1 {
    margin: 0;
}

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

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

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

Answer 2

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

  h1
  {
    margin-top:0;
  }

https://jsfiddle.net/kwb0ygmd/

Answer 3

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

h1, ul{
   margin: 0;
}

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

等重置

＆＃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;

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

3 个答案: