997 votos

¿Cómo eliminar el espacio entre los elementos del bloque en línea?

Dado este HTML:

<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

y este CSS:

span { 
    display:inline-block;
    width:100px;
}

como resultado, habrá un espacio de 4px de ancho entre los elementos SPAN.
Demo: http://jsfiddle.net/dGHFV/

Entiendo por qué sucede esto, y también sé que podría deshacerme de ese espacio eliminando el espacio en blanco entre los elementos SPAN en el código fuente HTML, así:

<p>
    <span> Foo </span><span> Bar </span>
</p>

Sin embargo, esperaba una solución CSS que no requiera que el código fuente HTML sea manipulado.

Sé cómo resolver esto con JavaScript - quitando los nodos de Texto del elemento contenedor (el párrafo), así:

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

Demo: http://jsfiddle.net/dGHFV/1/

¿Pero puede resolverse este problema sólo con el CSS?

949voto

thirtydot Puntos 114021

Como esta respuesta se ha vuelto bastante popular, la estoy reescribiendo de manera significativa.

No olvidemos la pregunta real que se hizo:

¿Cómo eliminar el espacio entre los elementos del bloque en línea? Esperaba que para una solución CSS que no requiere que el código fuente HTML sea manipulado. ¿Se puede resolver este problema sólo con el CSS?

Es es es posible resolver este problema sólo con el CSS, pero no hay completamente arreglos robustos del CSS.

La solución que tenía en mi respuesta inicial era añadir font-size: 0 al elemento padre, y luego declarar un sensato font-size en los niños.

http://jsfiddle.net/thirtydot/dGHFV/1361/

Esto funciona en las versiones recientes de todos los navegadores modernos. Funciona en IE8. No funciona en Safari 5, pero hace trabajar en Safari 6. Safari 5 es casi un navegador muerto ( 1,49%, julio de 2013 ).

La mayoría de los posibles problemas con los tamaños relativos de las fuentes no son complicados de arreglar.

Sin embargo, aunque esta es una solución razonable si necesita específicamente un arreglo sólo de CSS, no es lo que recomiendo si eres libre de cambiar tu HTML (como la mayoría de nosotros).


Esto es lo que yo, como un desarrollador web razonablemente experimentado, realmente hago para resolver este problema:

<p>
    <span>Foo</span><span>Bar</span>
</p>

Sí, es cierto. Elimino el espacio en blanco en el HTML entre los elementos del bloque de línea.

Es fácil. Es sencillo. Funciona en todas partes. Es la solución pragmática.

A veces hay que considerar cuidadosamente de dónde vendrá el espacio blanco. ¿Añadir otro elemento con jQuery añadirá espacio en blanco? No, no si lo haces bien.

Vamos a hacer un viaje mágico de diferentes formas de eliminar el espacio en blanco, con algo de nuevo HTML:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
  • Puedes hacer esto, como suelo hacer:

    <ul>
        <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    </ul>

    http://jsfiddle.net/thirtydot/dGHFV/1362/

  • O, esto:

    <ul>
        <li>Item 1</li
        ><li>Item 2</li
        ><li>Item 3</li>
    </ul>
  • O bien, utilice los comentarios:

    <ul>
        <li>Item 1</li><!--
        --><li>Item 2</li><!--
        --><li>Item 3</li>
    </ul>
  • O, puedes incluso saltar ciertos cerrando las etiquetas por completo (todos los navegadores están bien con esto):

    <ul>
        <li>Item 1
        <li>Item 2
        <li>Item 3
    </ul>

Ahora que he ido y te he aburrido hasta la muerte con "mil maneras diferentes de eliminar los espacios en blanco, por treinta puntos", espero que hayas olvidado todo sobre font-size: 0 .

152voto

HBP Puntos 6676

Para los navegadores conformes a CSS3 hay white-space-collapsing:discard

ver: http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing

89voto

Andrea Ligios Puntos 16653

Vale, aunque he subido la votación de los dos font-size: 0; y el not implemented CSS3 feature respuestas, después de intentarlo descubrí que ninguno de ellos es una solución real .

En realidad, no hay ni siquiera una solución sin fuertes efectos secundarios.

Luego Decidí eliminar los espacios (esta respuesta es sobre este argumento) entre el inline-block buceos de mi HTML fuente ( JSP ), girando esto:

<div class="inlineBlock">
    I'm an inline-block div
</div>
<div class="inlineBlock">
    I'm an inline-block div
</div>

a esto

<div class="inlineBlock">
    I'm an inline-block div
</div><div class="inlineBlock">
    I'm an inline-block div
</div>

que es feo, pero que funciona.

Pero, espera un minuto... ¿qué pasa si estoy generando mis buceos en el interior Taglibs loops ( Struts2 , JSTL ...etc...) ?

Por ejemplo:

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour">
        <s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}">
            <div class="inlineBlock>
                I'm an inline-block div in a matrix 
                (Do something here with the pushed object...)
           </div>
       </s:push>
    </s:iterator>
</s:iterator>

No se puede pensar en absoluto en poner en línea todas esas cosas, significaría

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour"><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div></s:push></s:iterator>
</s:iterator>

que no es legible, difícil de mantener y entender, etc...

La solución que encontré:

usar comentarios HTML para conectar el final de un div con el comienzo del siguiente!

<s:iterator begin="0" end="6" status="ctrDay">
   <br/>
   <s:iterator begin="0" end="23" status="ctrHour"><!--
    --><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><!--
        --><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div><!--
    --></s:push><!--
--></s:iterator>
</s:iterator>

De esta manera tendrás un código legible y correctamente indentado.

Y, como un efecto secundario positivo, el HTML source aunque infestado de comentarios vacíos, resultará correctamente sangrado;

tomemos el primer ejemplo, imho esto:

    <div class="inlineBlock">
        I'm an inline-block div
    </div><!--
 --><div class="inlineBlock">
        I'm an inline-block div
    </div>

es mejor que esto

    <div class="inlineBlock">
         I'm an inline-block div
    </div><div class="inlineBlock">
         I'm an inline-block div
    </div>

Espero que eso ayude...

40voto

Radek Puntos 1908

Añade comentarios entre los elementos para NO tener un espacio en blanco. Para mí es más fácil que restablecer el tamaño de la fuente a cero y luego volver a ponerla.

<div>
    Element 1
</div><!--
--><div>
    Element 2
</div>

31voto

user3083215 Puntos 91

Esta es la misma respuesta que di en el relato: La pantalla: Bloqueo en línea - ¿Qué es ese espacio?

Hay una forma muy simple de eliminar los espacios en blanco del bloque en línea que es fácil y semántica. Se llama fuente personalizada con espacios de ancho cero, lo que permite colapsar los espacios en blanco (añadidos por el navegador para los elementos en línea cuando están en líneas separadas) en el nivel de la fuente usando una fuente muy pequeña. Una vez que declaras la fuente, sólo tienes que cambiar la familia de la fuente en el contenedor y de nuevo en los niños, y voila. Así:

@font-face{ 
    font-family: 'NoSpace';
    src: url('../Fonts/zerowidthspaces.eot');
    src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/zerowidthspaces.woff') format('woff'),
         url('../Fonts/zerowidthspaces.ttf') format('truetype'),
         url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg');
}

body {
    font-face: 'OpenSans', sans-serif;
}

.inline-container {
    font-face: 'NoSpace';
}

.inline-container > * {
    display: inline-block;
    font-face: 'OpenSans', sans-serif;
}

A su gusto. Aquí hay una descarga de la fuente que acabo de preparar en font-forge y convertir con el generador de fuentes web FontSquirrel. Me llevó 5 minutos. La declaración de css @font-face está incluida: fuente de espacio de ancho cero comprimido . Está en Google Drive, así que tendrás que hacer clic en Archivo > Descargar para guardarlo en tu ordenador. Probablemente también tendrás que cambiar la ruta de la fuente si copias la declaración en tu archivo css principal.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X