在带有背景图像的div中添加文本元素会导致图像周围出现空白

Question

我有以下CSS：

body{
box-sizing: border-box;
margin: 0;
padding: 0;
}
#section-one{
background-image: url('https://i.picsum.photos/id/738/200/300.jpg?hmac=x-GpfBAQrKyKnrXqne7UJ3rdVnkGD7e-uRhpCcZWb9I'); /*random image*/
background-repeat:no-repeat;
background-position: center center;
background-size: 100%;
height: 60vh;
}

如果我把它应用于一个空的div，比如：

<div id='section-one'>
</div>

背景图像会生效，并且周围不会有空白(https://codepen.io/ob98/pen/JjXEMPK)。但是，当我尝试向#section-one:添加文本时

<div id='section-one'>
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
<div id="tagline">
<h1>Text</h1>
<h1>Text</h1>
</div>
</div>

空白出现在背景图像的上方和右侧。这可以在这里看到：https://codepen.io/ob98/pen/MWyJOMd

如果有人知道是什么导致了这种情况以及如何解决，我们将不胜感激。

Answer 1

您的标签有16px的边距。

给<ul>标记一个id，然后通过应用下面的css来覆盖默认类。

body {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#section-one {
background-image: url('https://i.picsum.photos/id/738/200/300.jpg?hmac=x-GpfBAQrKyKnrXqne7UJ3rdVnkGD7e-uRhpCcZWb9I');
/*random image*/
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
height: 60vh;
}
ul#items {
margin: 0px;
}

<div id='section-one'>
<ul id='items'>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
<div id="tagline">
<h1>Text</h1>
<h1>Text</h1>
</div>
</div>

Answer 2

将overflow: hidden;添加到#section-oneid。

body{
box-sizing: border-box;
margin: 0;
padding: 0;
}
#section-one{
background-image: url('https://i.picsum.photos/id/738/200/300.jpg?hmac=x-GpfBAQrKyKnrXqne7UJ3rdVnkGD7e-uRhpCcZWb9I'); /*random image*/
background-repeat:no-repeat;
background-position: center center;
background-size: 100%;
height: 60vh;
overflow: hidden;
}