根据子大小+边距扩展父div

Question

目前，我在div1中有div2，两者都有相同的大小。 我想为div2添加边框/边距但不减小div2的大小，而是扩展div1的大小。

知道怎么做吗？

Answer 1

外部容器不需要width和height属性。如果是这种情况，如果子元素（.div1）具有.div2，则外部容器（margin）将展开。有关更好的理解，请参阅代码示例：）

.div1 {
  border: 4px solid #111;
  width: auto; /* remove width */
  height: auto; /* remove height */
  display: inline-block;  /* make it more flexible */
}

.div2 {
  width: 100px;
  height: 100px;
  background: cyan;
}

.div2.with-margin {
  margin: 20px;
}

<div class="div1">
  <div class="div2"></div>
</div>
<div class="div1">
  <div class="div2 with-margin"></div>
</div>