时间戳

首页 > 解决方案 > 为什么我的代码中有这个额外的部分？

html - 为什么我的代码中有这个额外的部分？

问题描述

签出这个 codepen [ 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>

代码图像

标签： htmlcss

解决方案

发生这种情况是因为元素应用了默认边距，这会导致空格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>

推荐阅读