html - 如何使用 padding/margin 来移动一个 div？

Question

CSS 大师的简单问题

我使用 div 部分创建了两个正方形。第一个是黑色的，里面是红色的。问题是每次我想将红色方 block 移到黑色方 block 下方时，黑色方 block 也会随之向下移动。我怎样才能阻止它？

<div class="black">
  <div class="red">

  </div>
<div>


.black{
  width: 500px;
  height: 500px;
  background: black;
}

我不希望黑色方 block 掉下去。我该如何阻止它？

.red{
  width: 100px;
  height: 100px;
  background: red;
  margin-top: 50px;
  margin-left: 60px;
}

提前致谢!

Answer 1

不需要设置为绝对元素。由于您的红框在黑框内，您可以使用填充来证明其中的红框。

.black {
   width: 500px;
   height: 500px;
   background: black;
   padding-top: 50px;
}

Here is a JSFiddle for it!