CSS 可能会重叠像 `display:block` 这样的边距，但与 `display:inline-block`

Question

有没有可能让一个inline-block元素的边距重叠链接display:block呢？

以下代码段具有所需的边距，但是 display:block

div {
  width: 30px;
  height: 30px;
  background: blue;
  margin: 30px;
  display:block;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

以下代码段具有所需的显示，但边距未合并。

div {
  width: 30px;
  height: 30px;
  background: blue;
  margin: 30px;
  display: inline-block;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

我已经检查了所有 display 值，但似乎没有一个能产生预期的效果。

结果应该与 @Praveen Kumar Answer 完全一样但这是特定于上面的示例。

Answer 1

我会这样做。给一个 margin-left 并且单独为 :first-child 移除 margin-left。或者更好的方法是，仅在一侧使用 margin:

div {
  width: 30px;
  height: 30px;
  background: blue;
  margin: 30px;
  margin-right: 0;
  display: inline-block;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

此外，您可能正在寻找 margin collapsing .这应该适合你。