html - 当我给子 div 留出边距时，父 div 的背景会移动

Question

过去几个小时我一直在制作一个网站，但我被困在了最后的工作中。当我给我的 child div 一个边距时，我的 parent div 出于某种原因移动了他的背景。

<div class='actors'>
<div class='actorsbox'> 
    <div class='actorsboxtext'>hello world</div>    
</div>

.actors {
height: 500px;
width: 100%;
background-image: url("../rock5.jpg");
background-size:contain;}

.actorsbox {
border: 3px solid black;
background-color: white;
height: 420px;
margin-left: 40px;
margin-right: 40px;
margin-top: 40px;
border-radius: 20px 20px 20px 20px;}

.actorsboxtext {
height: 380px;
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;}

我不认为问题出在上面的代码中，所以这是我的 fiddle :https://jsfiddle.net/8p3hvytp/1/我说的 div 在页面底部。我将边框和背景涂成红色，这样您就可以看到当我给我的 child div 留出边距时创建的空间。

我希望有人能帮我解决这个问题，因为我需要在今天之前完成它!所以这对我来说是个大问题，所以提前致谢!

Answer 1

只需给 .actors 一个 float 即可。

.actors{
   float: left;
   height: 500px;
   width: 100%;
   background-image: url("../rock5.jpg");
   background-size:contain;
}

或

.actors{
   display: block;
   overflow: hidden;
   height: 500px;
   width: 100%;
   background-image: url("../rock5.jpg");
   background-size:contain;
}