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>

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;

You can use margin instead

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