border-spacing issue with span element-CodePudding

How can i add space between this borders? Border-spacing is not working.

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

CSS

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

CodePudding user response：

border-spacing

border-spacing only applies to table cells. If you want to use your span with that specific style property you have to set its parent display to table and the span itself to 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

Another way would be to add a margin. Yet be aware of the excess margin on the last element, which might not always be desired.

.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>

CodePudding user response：

You can use margin instead

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

CodePudding user response：

border-spacing only sets the distance between the borders of adjacent cells in a . You don't have a table here, so the command doesn't work! You need to set the padding. In your case: padding: 10px;