css - 根据子尺寸+边距展开父div

Question

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

知道怎么做吗？

Answer 1

外部容器不需要 width 和 height 属性。在这种情况下，如果子元素 (.div2) 具有 margin，则外部容器 (.div1) 将展开。请参阅代码示例以更好地理解:)

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