CODEWITHSUNDEEP
csslayoutreceipt
Dan
Dan

Reputation: 57881

Add space between HTML elements only using CSS

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:

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.

Upvotes: 177

Views: 551996

Answers (13)

belykh
belykh

Reputation: 1290

/* 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>

Upvotes: 0

Stefan Zhelyazkov
Stefan Zhelyazkov

Reputation: 2981

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.

Enter image description here

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

Enter image description here

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

Upvotes: 5

reddtoric
reddtoric

Reputation: 686

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

Upvotes: 52

John Balvin Arias
John Balvin Arias

Reputation: 2886

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>

Upvotes: 3

jalooc
jalooc

Reputation: 1227

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;
}

Upvotes: 2

Angie
Angie

Reputation: 521

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.

Upvotes: 24

Ben
Ben

Reputation: 121

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.

Upvotes: 12

sandeep
sandeep

Reputation: 92793

You can write like this:

span{
    margin-left: 10px;
}

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

Upvotes: 5

Tim Joyce
Tim Joyce

Reputation: 4517

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

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

Upvotes: 0

Moe Sweet
Moe Sweet

Reputation: 3721

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

Upvotes: 2

Simone
Simone

Reputation: 21272

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.

Upvotes: 48

Vladyslav Savchenko
Vladyslav Savchenko

Reputation: 1352

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

Upvotes: 9

thirtydot
thirtydot

Reputation: 228162

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

Upvotes: 362

Related Questions