如何在div内的一系列跨度之间启用顶部和底部边距？

Question

我有一个包含多个跨度的div.每个跨度都有填充和背景颜色,以将其与其他跨度分开.问题是当跨度溢出到下一行时,不同行上的跨距填充重叠.我已经尝试为跨度分配顶部和底部边距,但它们被忽略.如何在跨度之间应用间距？

HTML:

<div class='container-div'>
  <span class='item'>foo</span>
  <span class='item'>blah blah</span>
  <span class='item'>abracadabra</span>
  <span class='item'>bar</span>
</div>

CSS:

.item {
  padding: 5px;
  background-color: #f8f8f8;
  margin-top: 10px;
  margin-bottom: 10px;
}

假设div显示第一行的前两个跨度,然后自然换行以显示第二行中的后两个跨度.两条线的灰色填充重叠.margin-top和margin-bottom被忽略.

Answer 1

如果我理解正确,你会想知道为什么内联元素会忽略保证金:

8.3保证金属性:'保证金顶部','保证金权利','保证金底部','保证金左边'和'保证金'

边距属性指定框的边距区域的宽度.'保证金'速记属性设定所有四边的保证金,而其他保证金属性仅设定各自的边.这些属性适用于所有元素,但垂直边距不会对未替换的内联元素产生任何影响.

http://www.w3.org/TR/CSS21/box.html#margin-properties

因此,您可以使用inline-block以下方法模拟所需的行为:

.container-div {
  width: 50px;
}
.item {
  padding: 5px;
  background-color: #f8f8f8;
  margin: 10px 0 10px 0;
  display: inline-block;
}

<div class='container-div'>
  <span class='item'>foo</span>
  <span class='item'>blah blah</span>
  <span class='item'>abracadabra</span>
  <span class='item'>bar</span>
</div>

参考

替换元素