Add space between HTML elements only with CSS

Question

I have several identical HTML elements going one after another:

<span>1</span> <span>2</span> <span>3</span> 

I am looking for a better way to add space BETWEEN elements using CSS

 [no space] [1] [space 10px] [2] [space 10px] [3] [no space] 

Additionally:

• Please write down browser compatibility with your receipts.

---

UPDATE

Looks like I was unclear. I do not want to use ANY ADDITIONAL HTML MARKER, for example

 <span></span> <span></span> <span class="last_span"></span> 

I do not want to use tables

I want the first and last range to be automatically adjusted using CSS

I do not want to use javascript

Additional requirements: the last range may NOT be the LAST CHILD of the parent tag, but it will be the LAST SPAN of the parent tag. There are no other tags in between.

Answer 1

A good way to do this:

 span + span { margin-left: 10px; } 

Each span preceded by a span (therefore, each span except the first) will have margin-left: 10px .

Here is a more detailed answer to a similar question: Separators between elements without hacks

Answer 2

Just use margin or padding.

In your specific case, you can use margin:0 10px only on the second <span> .

UPDATE

Here is a good CSS3 solution ( jsFiddle ):

 span { margin: 0 10px; } span:first-of-type{ margin-left: 0; } span:last-of-type{ margin-right: 0; } 

Unfortunately, an extended selection of elements using selectors of the type :nth-child() :last-child :first-of-type , etc. not supported by Internet Explorer 8 and previous versions.

Answer 3

You can take advantage of the fact that span is an inline element

 span{ word-spacing:10px; } 

However, this solution will break if there is more than one word of text in your range.

Answer 4

It is so simple.

You can style elements with the exception of the first one in only one line of code:

 span ~ span { padding-left: 10px; } 

and done, without manipulating the class.

Answer 5

You can write like this:

 span{ margin-left:10px; } span:first-child{ margin-left:0; } 

Answer 6

 span:not(:last-child) { margin-right: 10px; } 

Answer 7

<span> is an inline element, so you cannot span them without making it a block level. try it

Horizontally

 span{ margin-right: 10px; float: left; } 

Vertical

 span{ margin-bottom: 10px; } 

Compatible with all browsers.

Answer 8

 span.middle { margin: 0 10px 0 10px; /*top right bottom left */ } <span>text</span> <span class="middle">text</span> <span>text</span> 

Answer 9

Or instead of setting the marker and redefining it, you can immediately set it correctly with the following combination:

 span:not(:first-of-type) { margin-left: 5px; } span:not(:last-of-type) { margin-right: 5px; }