Question

每当我输入h1或p之类的元素时，此多余的空间就会进入设计。如果我在#second中删除h1，则会删除此空间。我不知道为什么它在那里。谢谢。

我的代码：

* {
  box-sizing: border-box;
}

#container {
  width: 400px;
  background-color: gray;
  height: 800px;
  margin: 20px auto;
  box-shadow: 5px 5px 15px #BEBEBE;
}

#first {
  height: 250px;
  background-image: url(https://wallpapercave.com/wp/KLaNOxd.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border: 2px solid red;
}

#second {
  background-color: white;
  height: 530px;
}

<body>
  <div id="container">
    <div id="first">
    </div>
    <div id="second">
      <div class="today">
        <h1>bgbjbgjrgjn</h1>
      </div>
      <div class="tommorow"></div>
    </div>
  </div>
</body>

Answer 1

之所以发生这种情况，是因为h1和p元素已应用了默认边距，这会导致空格。

h1 {
  margin: 0;
}

将margin: 0设置为h1元素将解决您的问题。我还建议您创建一个类并将这种样式应用于您的类，以免影响页面上的所有h1标签。

请参见下面的工作示例：

<style>
  * {
    box-sizing: border-box;
  }
  
  #container {
    width: 400px;
    background-color: gray;
    height: 800px;
    margin: 20px auto;
    box-shadow: 5px 5px 15px #BEBEBE;
  }
  
  #first {
    height: 250px;
    background-image: url(https://wallpapercave.com/wp/KLaNOxd.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: 2px solid red;
  }
  
  #second {
    background-color: white;
    height: 530px;
  }
  
  .no-margin { /* remove the margin */
    margin: 0;
  }
</style>

<body>
  <div id="container">
    <div id="first">
    </div>
    <div id="second">
      <div class="today">
        <h1 class="no-margin">bgbjbgjrgjn</h1>
      </div>
      <div class="tommorow"></div>
         
    </div>
  </div>
</body>

Answer 2

这是因为default margin应用于<h1>标签。因此，请添加此CSS。

h1 {
    padding: 0;
    margin: 0;
 }

注意：随着<h1>标签获得default margin的引导程序或其他样式的提示。

Answer 3

这是因为默认的用户代理样式表。不同的浏览器设置不同的默认CSS规则，因此在您的示例中， h1 标签默认具有以下样式：

margin-block-start: 0.67em; 
margin-block-end: 0.67em;

您可以将此CSS属性添加到CSS代码中，它将解决您的问题：

#second h1{
    margin:0;
}

为什么我的代码中有这个多余的部分？

3 个答案: