span 元素的边界间距问题

Question

如何在此边界之间添加 space？边框间距不起作用。

 {{#each spacing}}
<span class='space'>
  {{business}} ({{Count}})
</span>
{{/each}}

CSS

.space{
  border: 1px solid gray;
 border-spacing: 10px;
} 

Answer 1

border-spacing 只设置 a 中相邻单元格边界之间的距离。你这里没有 table，所以命令不起作用！ 您需要设置填充。 在你的情况下：padding: 10px;

Answer 2

您可以改用margin

.space {
 border: 1px solid gray;
 margin: 0 5px 0 0;
} 

Answer 3

border-spacing

border-spacing 仅适用于 table 单元格。如果您想将 span 与特定样式 属性 一起使用，则必须将其父显示设置为 table 并将 span 本身设置为 table-cell.

div{
  border-spacing: 10px;
  display: table
}

span{
  border: 1px solid red;
  display: table-cell
}

  <div>
    <span>a</span>
    <span>b</span>
  </div>

保证金

另一种方法是添加 margin。但请注意最后一个元素的多余边距，这可能并不总是需要的。

.spacer{
  border: 1px solid gray;
  margin-right: 20px;
}

/*REM: Remove margin on last element*/
.spacer:last-of-type{
  margin-right: 0
}

<span class = 'spacer'>a</span>
<span class = 'spacer'>b</span>
<b>c</b>