Question

我过去几个小时都在制作一个网站，但我仍然坚持工作的最后一点。当我给孩子div一个边缘时，我父母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;}

我不认为问题出在上面的代码中，所以这是我的小提琴：https://jsfiddle.net/8p3hvytp/1/ 我正在谈论的div位于页面底部。我将边框涂成红色，背景为红色，这样您就可以看到当我给孩子一个边缘时创建的空间。

我希望有人可以帮助我，因为我今天需要它！所以对我来说这是一个很大的问题，所以提前感谢！

Answer 1

预期行为，在为孩子提供保证金时父母的背景会移动，背景包括边距：

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

您可能正在寻找填充：

.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

Oke问题解决了，我忘了在div中添加浮动。我还不清楚为什么我需要浮动背景图像，但今天还有更多值得思考的东西。

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

当我给孩子div一个边距时，父div的背景移动

3 个答案: