parent div 的背景在我给 child 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 留白时创建的 space。

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

Answer 1

预期的行为是 parent 的背景在给 child 作为背景时移动包括页边距：

.parent {
  border: 1px solid black;
  background: red;
  height: 100px;
  width: 100px;
}

.child {
  border: 1px solid black;
  background: blue;
  height: 50px;
  width: 50px;
  margin: 10px;
}

<div class='parent'>
  <div class='child'></div>
</div>

您可能正在寻找 padding：

.actorsbox {
  padding: 40px;
}

我建议您查看 box-model 以了解有关如何计算边距和填充的信息:)

Answer 2

只需给.actors 一个浮动即可。

.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;
}

Answer 3

好的问题解决了，是我忘记在div中添加的浮动。我仍然不清楚为什么我需要背景图像的浮动，但今天这更值得深思。

谢谢你们所有人，非常感谢你们的帮助:)！（你救了我的屁股）

parent div 的背景在我给 child div 一个边距时移动

Background from a parent div moves when I give the child div a margin

html

css

margin