Ajouter de l'espace entre les éléments HTML en utilisant uniquement CSS

J'ai même plusieurs éléments HTML d'aller l'un après l'autre:

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

Je suis à la recherche de la meilleure façon d'ajouter de l'espace ENTRE les éléments à l'aide CSS

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

En outre:

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

Mise à JOUR

Il semble que j'ai été clair. Je ne veux pas d'un BALISAGE HTML comme

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

Je ne veux pas utiliser les tables

Je veux que la première et la dernière travée être ciblées automatiquement par le CSS

Je ne veux pas utiliser javascript

Exigence facultative: la dernière travée peut être PAS le DERNIER ENFANT de la balise parent, mais ce sera la DERNIÈRE TRAVÉE de la balise parente. Les travées de ne pas avoir d'autres balises entre eux.

  • Peut-être vous devriez envisager d'utiliser un tableau. Dépend de ce que des données va dans le text
  • Est le nombre de spanvariable s?
  • dernier recours devrait être de tables.
  • Le span éléments sont générés par le service web je n'ai pas accès. Donc je ne peux pas changer le balisage. Cependant, je peux parfaitement utiliser les CSS
  • Avec des questions comme cela, vous devez toujours spécifier le navigateur soutien dont vous avez besoin. "J'ai besoin d'IE7 support" recevront des réponses complètement différentes à la "je suis seulement à l'aide de google Chrome".
  • pas si les données qu'il a de la saisie est tablar, dans ce cas, c'est la première station.
  • Je ne savais pas qu'il n'a jamais été possible dans IE6, IE7

InformationsquelleAutor Dan | 2011-11-18
  1. 202

    Une bonne façon de le faire est: est-ce

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

    Chaque span précédée par une span (donc, tous les span l'exception de la première) aura margin-left: 10px.

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

    • bonne trouvaille!!!!!!
    • Ressemble à IE7 support statique quirksmode.org/css/contents.html
    • C'est génial. J'ai utilisé cette solution dans un projet en cours et fonctionne très bien. Merci pour le partage.
    • C'est une bonne solution, mais si votre conteneur va s'étaler sur plusieurs lignes, il échoue.
    • Il travaille également avec des classes, comme ceci: .sidebar-img + .sidebar-text { margin-left: 40px; }
    InformationsquelleAutor thirtydot
  2. 25

    Suffit d'utiliser la marge ou du rembourrage.

    Dans votre cas particulier, vous pouvez utiliser margin:0 10px seulement sur le 2ème <span>.

    Mise à JOUR

    Voici une belle CSS3 solution (jsFiddle): 

    span {
    margin: 0 10px;
}

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

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

    Éléments avancés de sélection à l'aide des sélecteurs comme :nth-child(), :last-child, :first-of-type, etc. est pris en charge depuis Internet Explorer 9.

    • Exemple: jsfiddle.net/dTmy6
    • Vous avez une grande réponse, Simone, mais pourriez-vous vous résoudre la question sans en préciser le dernier span manuellement? Ce devrait être le CSS du travail
    • Vous êtes les bienvenus
    • Ressemble à IE7 support statique quirksmode.org/css/contents.html
    • Une petite précision pour downvoters: @thirtydot réponse c'est génial et je l'aime beaucoup, mais elle donne un supplément de margin-left sur la dernière span, ce qui n'est pas exactement ce que l'OP voulait.
    • c'est un unneded hack, c'est le "word-spacing" propriété de: w3schools.com/cssref/pr_text_word-spacing.asp vérifiez Ben la réponse de
    • vrai, mais il ne fonctionne que pour les éléments en ligne.
    • l'OP voulait l'espace entre les travées, donc c'est ok pour donner une solution pour les éléments en ligne, la marge/padding/premier/dernier propriétés ne sont pas nécessaires ici et seulement ajoute de la complexité
    • En fait, l'OP a dit qu'il va être à l'aide de spans et divs (qui sont les éléments de bloc). Votre solution est valable de toute façon si vous définissez divs comme des éléments inline...

    InformationsquelleAutor Simone
  3. 9

    Vous pouvez prendre avantage du fait que span est un élément inline

    span{
     word-spacing:10px;
}

    Cependant, cette solution ne fonctionnera plus si vous avez plus d'un mot du texte de votre durée de

    InformationsquelleAutor Ben
  4. 6

    C'est tellement facile.

    Vous pouvez les éléments de style, à l'exclusion des premiers juste un, dans une ligne de code:

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

    et de fait, à aucune classe de la manipulation.

    • Celui-ci fonctionne perfekt. span + durée n'a pas fonctionné mais span ~ span fonctionne comme un charme! Merci
    • Heureux qui fonctionne pour vous!
    InformationsquelleAutor Angie
  5. 3

    Vous pouvez écrire comme ceci:

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

    <span> est un élément intégré de sorte que vous ne peut pas faire l'espacement sur eux sans en faire bloc.
    Essayez cette

    Horizontale

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

    Verticale

    span{
    margin-bottom: 10px;
}

    Compatible avec tous les navigateurs.

    InformationsquelleAutor Moe Sweet
  8. 1

    Vous devez envelopper vos éléments à l'intérieur d'un récipient, puis utiliser les nouvelles CSS3 comme grille css, cours gratuit, et ensuite utiliser grid-gap:value qui a été créé pour votre problème spécifique

    CSS:

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

    HTML:

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

    • J'étais à la recherche d'ajouter un espace entre les éléments d'une div de classe à l'aide de feuilles de styles css. J'ai utilisé votre exemple pour construire mon code pour que. A travaillé comme un charme. Merci!!!!
    InformationsquelleAutor John Balvin Arias
  9. 1

    ajouter ces règles pour le conteneur parent:

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

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

    La compatibilité du navigateur: https://gridbyexample.com/browsers/

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

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

    Ou, au lieu de définir la marge et de les ignorer, vous pouvez la régler correctement la liste déroulante suivantes:

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

span:not(:last-of-type) {
    margin-right: 5px;
}
    • Bonne réponse, la restriction est la prise en charge du navigateur de :first-of-type et :last-of-type sélecteurs CSS.
    • ...également vérifier not expression de la prise en charge du navigateur
    • href="http://caniuse.com/#feat=css-sel3" >c'est en fait, une grande, tous les quelques dernières années les navigateurs sont couverts. Mais je dois avouer, que yzoja la solution est encore mieux 🙂
    • Cette solution est supérieure dans le cas précis que vous allez inclure également les frontières entre les éléments séparateurs (donc comme un UL dans un nav, par exemple), il sera de placer correctement la frontière dans le milieu de l'espacement.
    InformationsquelleAutor jalooc