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

J’ai plusieurs mêmes éléments HTML l’un après l’autre:

1 2 3

Je cherche le meilleur moyen d’append de l’espace ENTRE les éléments en utilisant uniquement CSS

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

Aditionellement:

S’il vous plaît écrivez la compatibilité de votre navigateur de vos reçus

METTRE À JOUR

Il semble que je n’étais pas clair. Je ne veux pas utiliser de HTML MARKUP ADDITIONNEL comme

Je ne veux pas utiliser de tables

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

Je ne veux pas utiliser javascript

Condition facultative: la dernière scope peut être NOT LAST CHILD de la balise parent, mais ce sera le DERNIER SPAN de la balise parente. Les travées n’ont pas d’autres balises entre elles.

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

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

Chaque span précédée d’une span (donc chaque span sauf la première) aura une margin-left: 10px .

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

Utilisez simplement la marge ou le remplissage.

Dans votre cas spécifique, vous pouvez utiliser la margin:0 10px uniquement le 2ème .

METTRE À JOUR

Voici une belle solution CSS3 ( jsFiddle ):

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

Sélection avancée d’éléments utilisant des sélecteurs comme :nth-child() :last-child :first-of-type , etc. est pris en charge depuis Internet Explorer 9.

Vous pouvez profiter du fait que span est un élément en ligne

 span{ word-spacing:10px; }

Cependant, cette solution sera interrompue si vous avez plus d’un mot de texte dans votre étendue.

C’est si facile

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

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

et fait, sans manipulation de classe.

Vous pouvez écrire comme ceci:

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

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

est un élément en ligne, vous ne pouvez donc pas espacer sans le bloquer au niveau du niveau. Essaye ça

Horizontal

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

Verticale

 span{ margin-bottom: 10px; }

Compatible avec tous les navigateurs.

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

Ou, au lieu de définir une 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; }

Vous devez envelopper vos éléments dans un conteneur, puis utiliser les nouvelles fonctionnalités de CSS3 comme la grid css , cours gratuit , puis utiliser grid-gap:value créée 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; }

  1 2 3 
  4 5 6