Add space between HTML elements only using CSS
Just use margin or padding.
In your specific case, you could use margin:0 10px
only on the 2nd <span>
.
UPDATE
Here's a nice CSS3 solution (jsFiddle):
span {
margin: 0 10px;
}
span:first-of-type {
margin-left: 0;
}
span:last-of-type {
margin-right: 0;
}
Advanced element selection using selectors like :nth-child()
, :last-child
, :first-of-type
, etc. is supported since Internet Explorer 9.
A good way to do it is this:
span + span {
margin-left: 10px;
}
Every span
preceded by a span
(so, every span
except the first) will have margin-left: 10px
.
Here's a more detailed answer to a similar question: Separators between elements without hacks
add these rules to the parent container:
display: grid
grid-auto-flow: column
grid-column-gap: 10px
Good reference: https://cssreference.io/
Browser compatibility: https://gridbyexample.com/browsers/