html - 如何用CSS制作同心色块？

我尝试使用以下代码使多个嵌入式色块同心：

#div1, #div2, #div3, #div4, #div5 {
  width: 300px;
  height: 300px
}
#div1 {
  background: yellow;
}
#div2 {
  background: orange;
  padding: 50px;
}
#div3 {
  background: red;
  padding: 100px;
}
#div4 {
  background: purple;
  padding: 150px;
}

<div id="div4">
  <div id="div3">
    <div id="div2">
      <div id="div1"></div>
    </div>
  </div>
</div>

但是，这就是我得到的：


div1和div2块按预期同心嵌入，但是其他两个外部块似乎在填充层上折叠。代码有什么问题？

最佳答案

您只需要为最里面的元素设置width和height。其余的可以使用padding调整大小。将display: inline-block放在最外面的元素上以防止其拉伸，或将其width设置为500px。

#div1 {
  width: 300px;
  height: 300px;
  background: yellow;
}
#div2 {
  background: orange;
  padding: 50px;
}
#div3 {
  background: red;
  padding: 50px;
}
#div4 {
  background: purple;
  padding: 50px;
  display: inline-block;
}

<div id="div4">
  <div id="div3">
    <div id="div2">
      <div id="div1"></div>
    </div>
  </div>
</div>

关于html - 如何用CSS制作同心色块？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38537579/