Pregunta ¿Cómo elimino el espacio entre los elementos de bloque en línea?


Dado este HTML y CSS:

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}
<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

Como resultado, habrá un espacio de 4 píxeles de ancho entre los elementos SPAN.

Manifestación:  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 se manipule el código fuente HTML.

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

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

Manifestación:  http://jsfiddle.net/dGHFV/1/

Pero, ¿se puede resolver este problema solo con CSS?


868
2018-02-22 12:41


origen


Respuestas:


Dado que esta respuesta se ha vuelto bastante popular, la estoy reescribiendo significativamente.

No olvidemos la pregunta real que se hizo:

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

Eso es posible resolver este problema solo con CSS, pero no hay completamente correcciones sólidas de CSS.

La solución que tuve en mi respuesta inicial fue agregar 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 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 inactivo (0.33%, agosto de 2015)

La mayoría de los posibles problemas con los tamaños de fuente relativos no son difíciles de corregir.

Sin embargo, aunque esta es una solución razonable si específicamente necesita una corrección de CSS única, no es lo que recomiendo si puede cambiar su HTML (como la mayoría de nosotros).


Esto es lo que yo, como desarrollador web con experiencia razonable, realmente hago para resolver este problema:

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

Si, eso es correcto Elimino el espacio en blanco en el HTML entre los elementos de bloque en línea.

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

A veces tienes que considerar cuidadosamente de dónde vendrá el espacio en blanco. ¿Agregará otro elemento con JavaScript agregar espacios en blanco? No, no si lo haces correctamente

Vamos en un viaje mágico de diferentes maneras para eliminar los espacios en blanco, con algunos nuevos 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, use los comentarios:

    <ul>
        <li>Item 1</li><!--
        --><li>Item 2</li><!--
        --><li>Item 3</li>
    </ul>
    
  • O, usted puede incluso salte cierto 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 me he ido y te he aburrido hasta la muerte con "mil maneras diferentes de eliminar el espacio en blanco, por thirtydot", con suerte te has olvidado de todo font-size: 0.


Alternativamente, tú ahora puede usar flexbox para lograr muchos de los diseños que previamente ha utilizado en línea bloque para: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


846
2018-02-22 12:47



Para los navegadores conformes con CSS3 existe white-space-collapsing:discard 

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


139
2018-02-22 12:52



Ok, aunque he subido tanto el font-size: 0; y el not implemented CSS3 feature respuestas, después de intentar descubrí que ninguno de ellos es una solución real.

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

Entonces Decidí eliminar los espacios (Esta respuesta es sobre este argumento) entre el inline-block divs de mi HTML fuente (JSP), convirtiendo 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>

eso es feo, pero funciona.

Pero, espera un minuto ... ¿y si estoy generando mis divs dentro? 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 es absolutamente posible poner en línea todo eso, 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>

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

La solución que encontré:

¡use comentarios HTML para conectar el final de un div al 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á un código legible y con sangría correcta.

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

tomemos el primer ejemplo, yo soy 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 ayude...


77
2018-02-08 16:12



Añadir comentarios entre 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 establecerla.

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

34
2018-03-13 12:02



Esta es la misma respuesta que di sobre lo relacionado: Pantalla: bloque en línea: ¿qué es ese espacio?

De hecho, hay una manera muy simple de eliminar espacios en blanco del bloque en línea que es tanto fácil como semántico. Se llama fuente personalizada con espacios de ancho cero, lo que le permite colapsar el espacio en blanco (agregado por el navegador para los elementos en línea cuando están en líneas separadas) en el nivel de fuente usando una fuente muy pequeña. Una vez que declaras la fuente, solo cambias el font-family en el contenedor y de nuevo en los niños, y voila. Me gusta esto:

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

Juego a gusto. Aquí hay una descarga para la fuente que acabo de preparar en font-forge y convertida con FontSquirrel webfont generator. Me llevó todos los 5 minutos. El css @font-face declaración está incluida: fuente de espacio de cero con zíper. Está en Google Drive, por lo que deberá hacer clic en Archivo> Descargar para guardarlo en su computadora. Probablemente también necesite cambiar las rutas de las fuentes si copia la declaración en su archivo css principal.


26
2017-12-09 14:51



Todas las técnicas de eliminación de espacio para display:inline-block son hacks desagradables ...

Utilizar Flexbox 

Es increíble, resuelve todo este diseño de bloque en línea bs, y a partir de 2017 tiene 98% de compatibilidad con el navegador (más si no te importan los IE antiguos).


26
2017-12-13 14:21



Dos opciones más basadas en Módulo de texto CSS Nivel 3 (en lugar de white-space-collapsing:discard que se eliminó del borrador de la especificación):

  • word-spacing: -100%;

En teoría, debería hacer exactamente lo que se necesita: acortar los espacios en blanco     entre 'palabras' por el 100% del ancho del carácter del espacio, es decir,     cero. Pero parece que no funciona en ninguna parte, desafortunadamente, y esto     la característica está marcada como "en riesgo" (también se puede eliminar de la especificación).

  • word-spacing: -1ch;

Acorta los espacios entre palabras mediante el ancho del dígito '0'. En una fuente monoespacial, debe ser exactamente igual al ancho del carácter de espacio (y cualquier otro carácter). Esto funciona en Firefox 10+, Chrome 27+ y casi funciona en Internet Explorer 9+.

Violín


15
2017-07-24 02:42