css - sobre - span html significado

Agregar espacio entre elementos HTML solo con CSS

Question

Tengo varios elementos HTML iguales que van uno tras otro:

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

Estoy buscando la mejor manera de agregar espacio ENTRE los elementos usando solo CSS

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

Adicionalmente:

• Por favor anote la compatibilidad del navegador de sus recibos

ACTUALIZAR

Parece que no estaba claro. No quiero usar CUALQUIER MARCA HTML ADICIONAL como

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

No quiero usar tablas

Quiero que el primer y el último tramo sean dirigidos automáticamente por CSS

No quiero usar javascript

Requisito opcional: el último lapso no puede ser ÚLTIMO HIJO de la etiqueta principal, pero será el ÚLTIMO SPAN de la etiqueta principal. Los palos no tienen otras etiquetas entre ellos.

Answer 1

Debería envolver sus elementos dentro de un contenedor, luego usar las nuevas características de CSS3 como css grid , free course , y luego usar grid-gap:value que fue creado para su problema específico

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>

Answer 2

Eso es tan fácil.

Puede diseñar elementos con la exclusión del primero, solo en una línea de código:

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

y hecho, sin manipulación de clase.

Answer 3

O bien, en lugar de establecer el margen y reemplazarlo, puede configurarlo correctamente de inmediato con el siguiente combo:

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

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

Answer 4

Puede aprovechar el hecho de que span es un elemento en línea

span{
     word-spacing:10px;
}

Sin embargo, esta solución se romperá si tiene más de una palabra de texto en su extensión

Answer 5

Puedes escribir así:

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

Answer 6

Solo use margen o relleno.

En su caso específico, puede usar margin:0 10px solo en el 2do <span> .

ACTUALIZAR

Aquí hay una buena solución CSS3 ( jsFiddle ):

span {
    margin: 0 10px;
}

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

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

La selección avanzada de elementos utilizando selectores como :nth-child() :last-child :first-of-type , etc. es compatible desde Internet Explorer 9.

Answer 7

Una buena forma de hacerlo es esta:

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

Cada span precedido por un span (por lo tanto, cada span excepto el primero) tendrá margin-left: 10px .

Aquí hay una respuesta más detallada a una pregunta similar: Separadores entre elementos sin hacks

Answer 8

<span> es un elemento en línea, por lo que no puedes hacer espacios entre ellos sin hacerlo bloquear el nivel. Prueba esto

Horizontal

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

Vertical

span{
    margin-bottom: 10px;
}

Compatible con todos los navegadores.

Answer 9

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

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

Answer 10

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