签出此密码笔[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>
最佳答案
发生这种情况的原因是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>