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>

以下代码段具有所需的display，但边距不合并。

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：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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