web-dev-qa-db-fra.com

Ajouter de l'espace entre les éléments HTML uniquement à l'aide de CSS

J'ai plusieurs éléments HTML identiques, l'un après l'autre:

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

Je cherche le meilleur moyen d'ajouter de l'espace ENTRE les éléments en utilisant CSS seulement

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

Aditionellement:

  • S'il vous plaît écrivez la compatibilité du navigateur de vos recettes

UPDATE

On dirait que je n'étais pas clair. Je ne veux pas utiliser AUCUN MARQUE HTML SUPPLÉMENTAIRE comme

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

Je ne veux pas utiliser de tables

Je veux que le premier et le dernier span soient ciblés automatiquement par CSS

Je ne veux pas utiliser javascript

Condition facultative: la dernière plage peut être PAS le dernier enfant de la balise parent, mais ce sera la dernière étendue de la balise parent. Les étendues n'ont pas d'autres balises entre elles.

csslayoutreceipt
88
Dan

Une bonne façon de le faire est la suivante:

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

Chaque span précédé d'un span (donc, chaque span sauf le premier) aura margin-left: 10px.

Voici une réponse plus détaillée à une question similaire: séparateurs entre éléments sans hacks

206
thirtydot

Il suffit d'utiliser une marge ou un rembourrage.

Dans votre cas spécifique, vous pouvez utiliser margin:0 10px uniquement sur le 2e <span>.

UPDATE

Voici une belle solution CSS3 ( jsFiddle ):

span {
    margin: 0 10px;
}

span:first-of-type {
    margin-left: 0;
}

span:last-of-type {
    margin-right: 0;
}

La sélection avancée d'éléments à l'aide de sélecteurs tels que :nth-child(), :last-child, :first-of-type, etc. est prise en charge depuis Internet Explorer 9.

25
Simone

Vous pouvez tirer parti du fait que span est un élément en ligne.

span{
     Word-spacing:10px;
}

Cependant, cette solution ne fonctionnera pas si vous avez plus d'un mot de texte dans votre étendue.

10
Ben

C'est si facile.

Vous pouvez styler des éléments en excluant le premier, en une seule ligne de code:

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

et fait, sans classe manipuler.

8
Angie

Vous pouvez écrire comme ceci:

span{
 margin-left:10px;
}
span:first-child{
 margin-left:0;
}
3
sandeep
span:not(:last-child) {
    margin-right: 10px;
}
3
Vladyslav Savchenko

ajoutez ces règles au conteneur parent:

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

Bonne référence: https://cssreference.io/

Compatibilité du navigateur: https://gridbyexample.com/browsers/

3
reddtoric

Vous devez envelopper vos éléments dans un conteneur, puis utiliser les nouvelles fonctionnalités CSS3 telles que grille css , cours gratuit , puis utiliser grid-gap:value qui a été créé pour votre problème spécifique.

span{
  border:1px solid red;
}
.inRow{
  display:grid;
  grid-template-columns:repeat(auto-fill,auto);
  grid-gap:10px /*This add 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>
1
John Balvin Arias

<span> est un élément en ligne, vous ne pouvez donc pas les espacer sans le rendre au niveau du bloc. Essaye ça

Horizontal

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

Verticale

span{
    margin-bottom: 10px;
}

Compatible avec tous les navigateurs.

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

<span>text</span> <span class="middle">text</span> <span>text</span>
0
Tim Joyce

Ou, au lieu de définir la marge et de la remplacer, vous pouvez simplement la définir correctement avec le combo suivant:

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

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