Add space between HTML elements only using CSS

Question

I have several same HTML elements going one after another:

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

I'm looking for the best way of adding space between the elements using CSS only

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

Additionally:

Please write down browser compatibility of your receipts

I don't want to use any additional HTML markup like

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

I don't want to use tables.

I want the first and last span to be targeted automatically by CSS.

I don't want to use JavaScript.

Optional requirement: last span can be not last child of the parent tag, but it will be the last span of the parent tag. Spans do not have any other tags between them.

Maybe you should consider using a table. Depends on what data goes into the text — Madara's Ghost
– Madara's Ghost, Commented Nov 18, 2011 at 15:47
The span elements are generated by the web service I don't have access to. So I can't change the markup. However, I can fully use CSS — Dan
– Dan, Commented Nov 18, 2011 at 16:01
With questions like this, you should always specify the browser support you require. "I need IE7 support" will receive completely different answers to "I'm only using Chrome". — thirtydot
– thirtydot, Commented Nov 18, 2011 at 16:16

Community · Accepted Answer · 2017-05-23 12:26:23Z

366

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

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Nov 18, 2011 at 16:04

thirtydot

229k51 gold badges393 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Savas Vedova Over a year ago

This is a nice solution, though if your container will span to multiple lines it fails.

parsecer Over a year ago

It also works with classes, like this: .sidebar-img + .sidebar-text { margin-left: 40px; }

thdoan Over a year ago

How do you handle when the items wrap to the next line?

thirtydot Over a year ago

@thdoan: It depends on your layout, etc. You can try something like this.

Alex Salomon Over a year ago

I prefer reddtoric's solution using grid and grid-gap.

Peter Mortensen · Accepted Answer · 2022-10-01 20:27:53Z

53

Add these rules to the parent container:

display: grid
grid-auto-flow: column
grid-column-gap: 10px

A good reference: CSS Reference - A free visual guide to CSS

Browser compatibility: Browser Support for CSS Grid Layout

edited Oct 1, 2022 at 20:27

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Mar 27, 2019 at 3:39

reddtoric

6961 gold badge7 silver badges13 bronze badges

3 Comments

Alex Salomon Over a year ago

grid-auto-columns="max-content" may also be useful. It will make the grid item's size match the content. Also, browser compatibility shouldn't be an issue anymore: caniuse.com/#feat=css-grid

Rohan Kumar Over a year ago

This should be the accepted answer. I know comments are not for thanks, i was only making use of the 'flex' display until now, and this 'grid' thing makes it all so easy from the parent container itself! To not leave it entirely useless, would add the following reference that helps a lot for anyone looking to learn more: css-tricks.com/snippets/css/complete-guide-grid

Guilherme Taffarel Bergamin Over a year ago

This is the best answer as of 2024 and it's easy to assume how to change it for rows instead of columns for whoever fell here from Google looking for rows like myself

Peter Mortensen · Accepted Answer · 2022-10-01 19:39:51Z

49

Just use margin or padding.

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

Here's a nice CSS 3 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.

edited Oct 1, 2022 at 19:39

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Nov 18, 2011 at 15:45

Simone

21.6k16 gold badges84 silver badges112 bronze badges

4 Comments

Dan Over a year ago

You have a great answer, Simone, but could you please solve the question without specifying the last span manually? This should be the CSS's job

arieljuod Over a year ago

this is an unneded hack, that's the "word-spacing" property for: w3schools.com/cssref/pr_text_word-spacing.asp check Ben's answer

arieljuod Over a year ago

the OP wanted space between spans, so it's ok to give a solution for inline elements, the margin/padding/first/last properties are not needed here and only adds complexity

Simone Over a year ago

Actually, the OP said he'll be using spans and divs (which are block elements). Your solution is valid anyway if you define divs as inline elements...

Peter Mortensen · Accepted Answer · 2022-10-01 20:13:53Z

24

You can style elements with excluding the first one, just in one line of code:

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

There isn't a need to change any classes.

edited Oct 1, 2022 at 20:13

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered May 26, 2014 at 12:51

Angie

5216 silver badges17 bronze badges

2 Comments

juliusmh Over a year ago

This one works perfekt. span + span didnt work but span ~ span works like a charm! Thanks

Eric Over a year ago

In my case, I have several spans, some of which may not contain the class "Showing", so what I need is span.Showing ~ span.Showing instead of span.Showing + span.Showing. ~ is the general sibling selector, where one doesn't need to directly follow another.

Peter Mortensen · Accepted Answer · 2022-10-01 20:13:19Z

12

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

span{
     word-spacing: 10px;
}

However, this solution will break if you have more than one word of text in your span.

edited Oct 1, 2022 at 20:13

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered May 27, 2013 at 15:55

Ben

1211 silver badge2 bronze badges

Comments

Vladyslav Savchenko · Accepted Answer · 2014-12-11 08:13:24Z

9

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

answered Dec 11, 2014 at 8:13

Vladyslav Savchenko

1,35313 silver badges11 bronze badges

1 Comment

Peter Mortensen Over a year ago

An explanation would be in order.

Peter Mortensen · Accepted Answer · 2022-10-01 20:03:18Z

5

You can write like this:

span{
    margin-left: 10px;
}

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

edited Oct 1, 2022 at 20:03

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Nov 18, 2011 at 16:07

sandeep

93.2k24 gold badges140 silver badges156 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2022-10-01 20:36:17Z

5

If you want to align various items and you like to have the same margin around all sides, you can use the following. Each element within container, regardless of type, will receive the same surrounding margin.

.container {
  display: flex;
}
.container > * {
  margin: 5px;
}

If you wish to align items in a row, but have the first element touch the leftmost edge of container, and have all other elements be equally spaced, you can use this:

.container {
  display: flex;
}
.container > :first-child {
  margin-right: 5px;
}
.container > *:not(:first-child) {
  margin: 5px;
}

edited Oct 1, 2022 at 20:36

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jun 12, 2020 at 18:44

Stefan Zhelyazkov

3,0614 gold badges23 silver badges53 bronze badges

1 Comment

β.εηοιτ.βε Over a year ago

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value.

Peter Mortensen · Accepted Answer · 2022-10-01 20:25:28Z

3

You should wrap your elements inside a container, use new CSS 3 features like CSS grid, a free course, and then use grid-gap:value that was created for your specific problem.

span{
  border: 1px solid red;
}
.inRow{
  display: grid;
  grid-template-columns: repeat(auto-fill, auto);
  grid-gap: 10px /* This adds space between elements, only works on grid items */
}
.inColumn{
  display: grid;
  grid-template-rows: repeat(auto-fill, auto);
  grid-gap: 15px;
}

<div class="inrow">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>
<div class="inColumn">
  <span>4</span>
  <span>5</span>
  <span>6</span>
</div>

edited Oct 1, 2022 at 20:25

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jun 5, 2018 at 21:13

John Balvin Arias

2,9163 gold badges31 silver badges48 bronze badges

1 Comment

Estatistics Over a year ago

I was looking to add space between elements of a div class using css style. I used your example to build my code for that. Worked like a charm. Thank you!

Peter Mortensen · Accepted Answer · 2022-10-01 19:43:09Z

2

<span> is an inline element, so you can’t make spacing on them without making it block level.

Try this:

Horizontal

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

Vertical

span{
    margin-bottom: 10px;
}

It is compatible with all browsers.

edited Oct 1, 2022 at 19:43

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Nov 18, 2011 at 15:50

Moe Sweet

3,7013 gold badges37 silver badges46 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2022-10-01 20:16:23Z

2

Or, instead of setting margin and then overriding it, you can just set it properly right away with the following combination:

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

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

edited Oct 1, 2022 at 20:16

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Nov 14, 2014 at 13:02

jalooc

1,22614 silver badges26 bronze badges

4 Comments

Dan Over a year ago

Good answer, the restriction is the browser support of :first-of-type and :last-of-type CSS selectors.

Dan Over a year ago

...also check for not expression browser support

jalooc Over a year ago

@Dan it's actually great, all several last-years browsers are covered. But I must admit, that yzoja's solution is even smarter :)

Mir Over a year ago

This solution is superior in the specific case that you are going to also include borders between elements as separators (so like a UL in a nav, for example), as it will properly place the border in the middle of the spacing.

Peter Mortensen · Accepted Answer · 2022-10-01 19:56:03Z

0

span.middle {
    margin: 0 10px 0 10px; /* top right bottom left */
}

<span>text</span> <span class="middle">text</span> <span>text</span>

edited Oct 1, 2022 at 19:56

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Nov 18, 2011 at 15:53

Tim Joyce

4,5276 gold badges37 silver badges50 bronze badges

Comments

belykh · Accepted Answer · 2023-03-31 23:23:33Z

0

/* Horizontal space */
.space-8-x > * + * {
    margin-left: 8px;
}
/* Vertical space */
.space-8-y > * + * {
    margin-top: 8px;
}

<div class="space-8-x">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

<div class="space-8-y">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

answered Mar 31, 2023 at 23:23

belykh

1,36011 silver badges26 bronze badges

Collectives™ on Stack Overflow

Add space between HTML elements only using CSS

13 Answers 13

5 Comments

3 Comments

4 Comments

2 Comments

Comments

1 Comment

Comments

1 Comment

1 Comment

Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

5 Comments

3 Comments

4 Comments

2 Comments

Comments

1 Comment

Comments

1 Comment

1 Comment

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related