代码之家 › 专栏 › 技术社区 › yoan26

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

margin border css

yoan26 · 技术社区 · 8 年前

我想在div2中添加边框/边距,但不是减小div2的大小,而是扩展div1的大小。

1 回复 | 直到 8 年前

Gerrit 8 年前

外部容器不需要 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>

推荐文章

Vithis · WPF更改边距会向下推其他元素

7 年前

RejectEd27 · 无法从方框中删除边距

7 年前

altos · 菜单切换添加间距(边距)(如果单击)

8 年前

Iucounu · 响应CSS容器仅在平板电脑大小时失去利润

8 年前

A. Schmidt · XAML:ListViewItem中的StackPanel/GridView不占用ListViewItem的整个空间

8 年前

Shankar Naik · 为什么视图的边距必须为-20才能接近屏幕的末尾,为什么不为零?

8 年前

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

8 年前

Alexander Prisazhny · jQuery问题:body overflow vs body margin

8 年前

Taylor Barton · iFrame标记上的边距

8 年前

De Papier · 上/下页边距百分比在firefox中不起作用[重复]

8 年前