签出此密码笔[https://codepen.io/pen/]

每当我输入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>





html - 为什么我的代码中有这个多余的部分?-LMLPHP

最佳答案

发生这种情况的原因是h1p元素已应用了默认边距,这会导致空格。

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>

07-24 09:46
查看更多