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

【问题标题】：Expand parent div based on child size + margin根据子大小 + 边距展开父 div
【发布时间】：2018-01-18 16:04:43
【问题描述】：

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

知道怎么做吗？

【问题讨论】：

外部 div 上没有宽度/高度，但 display:inline-block 代替...完成。
谢谢！我将学习和研究这个 inline-block 选项。

【解决方案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>

【讨论】：

非常感谢您的澄清！