¿Cómo elimino el espacio entre los elementos inline / inline-block?

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.

Demostració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, de esta manera:

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

Sin embargo, esperaba una solución CSS que no requiera la manipulación del 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();

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

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

Como 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 ? Esperaba una solución CSS que no requiera la manipulación del código fuente HTML. ¿Se puede resolver este problema solo con CSS?

Que es posible resolver este problema con CSS solo, pero no hay completamente robustos correcciones de estilo CSS.

La solución que tuve en mi respuesta inicial fue agregar font-size: 0al elemento padre, y luego declarar un sentido font-sizesobre los hijos.

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 sí funciona en Safari 6. Safari 5 es casi un navegador muerto ( 0.33%, agosto de 2015 ).

La mayoría de los posibles problemas con los tamaños de fuente relativos no son complicados de solucionar.

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

Esto es lo que yo, como desarrollador web razonablemente experimentado, 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 simple. Funciona en todas partes. Es la solución pragmática.

A veces tiene 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 a un viaje mágico de diferentes maneras de eliminar el espacio en blanco, con un nuevo HTML:

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

• Puedes hacer esto, como hago habitualmente:

  <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 use los comentarios:

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

• O, si está utilizando PHP o similar:

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

• O incluso puede omitir ciertas etiquetas de cierre por completo (todos los navegadores están bien con esto):

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

Ahora que me fui y te aburrí hasta la muerte con "mil maneras diferentes de eliminar los espacios en blanco, por tres veces", espero que te hayas olvidado por completo font-size: 0.

Alternativamente, ahora puede usar flexbox para lograr muchos de los diseños para los que anteriormente haya utilizado inline-block: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

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

EDITAR:

hoy, deberíamos usar Flexbox .

ANTIGUA RESPUESTA:

Bien, aunque he votado tanto las respuestas font-size: 0;como las not implemented CSS3 featurerespuestas, después de intentarlo descubrí que ninguna de ellas es una solución real .

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

Luego decidí eliminar los espacios (esta respuesta es sobre este argumento) entre los inline-blockdivs de mi HTMLfuente ( 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 yo 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>

Es absolutamente imposible pensar en 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, difícil de mantener y comprender, 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 forma, tendrá un código legible y correctamente sangrado.

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

Tomemos el primer ejemplo. En mi humilde opinión, 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>

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

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

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

Use Flexbox

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

• ¿Estamos listos para usar Flexbox?
• Uso de cajas flexibles CSS - Guía para desarrolladores web | MDN
• Una guía completa de Flexbox | CSS-Tricks
• Flexy Boxes: herramienta de generación de código y área de juegos CSS flexbox

Añadir display: flex; al elemento padre. Aquí está la solución con un prefijo:

Versión simplificada 👇

p {
  display: flex;
}

span {
  width: 100px;
  background: tomato;
  font-size: 30px;
  color: white;
  text-align: center;
}

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

Arreglar con prefijo 👇

p {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
span {
  float: left;
  display: inline-block;
  width: 100px;
  background: blue;
  font-size: 30px;
  color: white;
  text-align: center;
}

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

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

En realidad, hay una manera muy simple de eliminar espacios en blanco del bloque en línea que es fácil y semántica. Se llama una fuente personalizada con espacios de ancho cero, lo que le permite contraer el espacio en blanco (agregado por el navegador para 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 declara la fuente, simplemente cambia la font-familyen el contenedor y de nuevo en los niños, y listo. 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;
}

Traje al gusto. Aquí hay una descarga de la fuente que acabo de preparar en font-forge y convertí con el generador de fuentes web FontSquirrel. Me llevó todo 5 minutos. La @font-facedeclaración css está incluida: fuente de espacio de ancho cero comprimido . Está en Google Drive, por lo que deberá hacer clic en Archivo> Descargar para guardarlo en su computadora. Probablemente también necesitará cambiar las rutas de fuente si copia la declaración en su archivo css principal.

Dos opciones más basadas en el Módulo de texto CSS Nivel 3 (en lugar de white-space-collapsing:discardque se hayan eliminado del borrador de especificaciones):

• word-spacing: -100%;

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

• word-spacing: -1ch;

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

Violín

Desafortunadamente, es 2019 y white-space-collapseaún no está implementado.

Mientras tanto, dele el elemento padre font-size: 0;y establezca el font-sizeen los hijos. Esto debería funcionar

Use flexbox y realice una reserva (de las sugerencias anteriores) para navegadores antiguos:

ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

Simple:

item {
  display: inline-block;
  margin-right: -0.25em;
}

No es necesario tocar el elemento padre.

Solo condición aquí: el tamaño de fuente del elemento no debe definirse (debe ser igual al tamaño de fuente del elemento primario).

0.25em es el predeterminado word-spacing

W3Schools - propiedad de espacio entre palabras

tamaño de fuente: 0; puede ser un poco más complicado de administrar ...

Creo que las siguientes dos líneas son mucho mejores y más reutilizables, y ahorran tiempo que cualquier otro método. Yo personalmente uso esto:

.inline-block-wrapper>.inline-block-wrapper,
.inline-block-wrapper{letter-spacing: -4px;}
.inline-block-wrapper>*{letter-spacing: 0;display: inline-block;}

/* OR better shorter name...*/
.items>.items,
.items{letter-spacing: -4px;}
.items>*{letter-spacing: 0;display: inline-block;}

Entonces puedes usarlo de la siguiente manera ...

<ul class="items">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

Hasta donde yo sé (puedo estar equivocado) pero todos los navegadores admiten este método.

EXPLICACIÓN :

Esto funciona (tal vez -3px puede ser mejor) exactamente como lo anticiparía.

• Copias y pegas el código (una vez)
• luego en su html solo use class="items"en el padre de cada bloque en línea.

NO tendrá la necesidad de volver a css y agregar otra regla css para sus nuevos bloques en línea.

Resolviendo dos problemas a la vez.

También tenga en cuenta que >(mayor que el signo) esto significa que * / todos los niños deben estar en línea bloqueada.

http://jsfiddle.net/fD5u3/

NOTA: He modificado para acomodar para heredar el espacio entre letras cuando un contenedor tiene un contenedor secundario.

Sin embargo, técnicamente no es una respuesta a la pregunta: "¿Cómo elimino el espacio entre los elementos de bloque en línea?"

Puede probar la solución flexbox y aplicar el código a continuación y se eliminará el espacio.

p {
   display: flex;
   flex-direction: row;
}

Puede obtener más información al respecto en este enlace: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

No estoy muy seguro si desea hacer dos tramos azules sin un espacio o si desea manejar otros espacios en blanco, pero si desea eliminar el espacio:

span {
    display: inline-block;
    width: 100px;
    background: blue;
    font-size: 30px;
    color: white;
    text-align: center;

    float: left;
}

Y hecho.

Generalmente usamos elementos como este en diferentes líneas, pero en caso de display:inline-block usar etiquetas en la misma línea, se eliminará el espacio, pero en una línea diferente no.

Un ejemplo con etiquetas en una línea diferente:

p span {
  display: inline-block;
  background: red;
}

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

Ejemplo con etiquetas en la misma línea

p span {
  display: inline-block;
  background: red;
}

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

Otro método eficiente es un trabajo CSS que está utilizando font-size:0el elemento primario y le da font-sizea un elemento secundario todo lo que desee.

p {
  font-size: 0;
}
p span {
  display: inline-block;
  background: red;
  font-size: 14px;
}

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

Los métodos anteriores pueden no funcionar en algún lugar dependiendo de la aplicación completa, pero el último método es una solución infalible para esta situación y se puede usar en cualquier lugar.

Tuve este problema ahora y desde font-size:0;que descubrí que en Internet Explorer 7 el problema persiste porque Internet Explorer piensa "¿Tamaño de fuente 0?!?! WTF ¿estás loco?" - Entonces, en mi caso tengo el restablecimiento de CSS de Eric Meyer y con font-size:0.01em;una diferencia de 1 píxel de Internet Explorer 7 a Firefox 9, entonces, creo que esto puede ser una solución.

He estado abordando esto recientemente y en lugar de configurar el padre y font-size:0luego volver a configurar el hijo a un valor razonable, he estado obteniendo resultados consistentes al configurar el contenedor principal y letter-spacing:-.25emluego el hijo nuevamente letter-spacing:normal.

En un hilo alternativo, vi a un comentarista mencionar que font-size:0 no siempre es ideal porque las personas pueden controlar los tamaños mínimos de fuente en sus navegadores, negando por completo la posibilidad de establecer el tamaño de fuente en cero.

El uso de ems parece funcionar independientemente de si el tamaño de fuente especificado es 100%, 15pt o 36px.

http://cdpn.io/dKIjo

Creo que hay un método muy simple / antiguo para esto que es compatible con todos los navegadores, incluso IE 6/7. Podríamos simplemente establecer letter-spacingun valor negativo grande en padre y luego volver a establecerlo normalen elementos secundarios:

body { font-size: 24px }
span { border: 1px solid #b0b0c0; } /* show borders to see spacing */

.no-spacing { letter-spacing: -1em; } /* could be a large negative value */
.no-spacing > * { letter-spacing: normal; } /* => back to normal spacing */

<p style="color:red">Wrong (default spacing):</p>

<div class="">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>

<hr/>

<p style="color:green">Correct (no-spacing):</p>

<div class="no-spacing">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>

La respuesta más simple a esta pregunta es agregar.

css

float: left;

enlace codepen: http://jsfiddle.net/dGHFV/3560/

Con corchetes PHP:

ul li {
  display: inline-block;
}

    <ul>
        <li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li>
    </ul>

Voy a ampliar un poco la respuesta de user5609829, ya que creo que las otras soluciones aquí son demasiado complicadas / demasiado trabajo. La aplicación de a margin-right: -4pxa los elementos de bloque en línea eliminará el espacio y es compatible con todos los navegadores. Vea el violín actualizado aquí . Para los interesados en el uso de los márgenes negativos, tratar de darle a este una lectura.

La especificación Nivel 4 del Módulo de texto CSS define untext-space-collapse propiedad, que permite controlar cómo se procesa el espacio en blanco dentro y alrededor de un elemento.

Entonces, con respecto a su ejemplo, solo tendría que escribir esto:

p {
  text-space-collapse: discard;
}

Desafortunadamente, ningún navegador está implementando esta propiedad todavía (a partir de septiembre de 2016) como se menciona en los comentarios a la respuesta de HBP .

Encontré una solución CSS pura que me funcionó muy bien en todos los navegadores:

span {
    display: table-cell;
}

Añadir white-space: nowrap al elemento contenedor:

CSS:

* {
    box-sizing: border-box;
}
.row {
    vertical-align: top;
    white-space: nowrap;
}
.column{
    float: left;
    display: inline-block;
    width: 50% // Or whatever in your case
}

HTML:

<div class="row">
    <div class="column"> Some stuff</div>
    <div class="column">Some other stuff</div>
</div>

Aquí está el Plunker .

Hay un montón de soluciones como font-size:0, word-spacing, margin-left,letter-spacing y así sucesivamente.

Normalmente prefiero usar letter-spacingporque

1. parece correcto cuando asignamos un valor que es mayor que el ancho del espacio extra (p. ej. -1em ).
2. Sin embargo, no estará bien word-spacingy margin-leftcuando establecemos un valor mayor como-1em .
3. El uso font-sizeno es conveniente cuando intentamos usarlo emcomo font-sizeunidad.

Entonces, letter-spacing parece ser la mejor opción.

Sin embargo, tengo que advertirte

cuando usas letter-spacinges mejor que uses otros -0.3emo -0.31emno.

* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: inherit;
  cursor: auto;
}
.nav {
  width: 260px;
  height: 100px;
  background-color: pink;
  color: white;
  font-size: 20px;
  letter-spacing: -1em;
}
.nav__text {
  width: 90px;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid black;
  line-height: 40px;
  background-color: yellowgreen;
  text-align: center;
  display: inline-block;
  letter-spacing: normal;
}

<nav class="nav">
    <span class="nav__text">nav1</span>
    <span class="nav__text">nav2</span>
    <span class="nav__text">nav3</span>
</nav>

Si está utilizando Chrome (versión de prueba 66.0.3359.139) u Opera (versión de prueba 53.0.2907.99), lo que verá podría ser:

Si está utilizando Firefox (60.0.2), IE10 o Edge, lo que verá podría ser:

Eso es interesante. Entonces, verifiqué el espaciado entre letras y mdn y encontré esto:

longitud

Especifica espacio adicional entre caracteres además del espacio predeterminado entre caracteres. Los valores pueden ser negativos, pero puede haber límites específicos de implementación. Los agentes de usuario no pueden aumentar o disminuir aún más el espacio entre caracteres para justificar el texto.

Parece que esta es la razón.

Agregue letter-spacing:-4px;el pCSS principal y agregue letter-spacing:0px;a su spanCSS.

span {
  display:inline-block;
  width:100px;
  background-color:palevioletred;
  vertical-align:bottom;
  letter-spacing:0px;
}

p {
  letter-spacing:-4px;
}

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

Pensé que agregaría algo nuevo a esta pregunta, ya que aunque muchas de las respuestas proporcionadas actualmente son más que adecuadas y relevantes, hay algunas nuevas propiedades CSS que pueden lograr una salida muy limpia, con soporte completo en todos los navegadores, y poco sin 'hacks'. Esto se aleja, inline-blockpero le da los mismos resultados que la pregunta solicitada.

Estas propiedades CSS son grid

CSS Grid es altamente compatible ( CanIUse ) aparte de IE, que solo necesita un -ms-prefijo para que funcione.

CSS Grid también es muy flexible, y toma todas las partes buenas de table, flexyinline-block elementos y los pone en un solo lugar.

Al crear un gridpuede especificar los espacios entre las filas y columnas. El espacio predeterminado ya está configurado, 0pxpero puede cambiar este valor a lo que desee.

Para acortarlo un poco, aquí hay un ejemplo de trabajo relevante:

body {
  background: lightblue;
  font-family: sans-serif;
}

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-column-gap: 0; /* Not needed but useful for example */
  grid-row-gap: 0; /* Not needed but useful for example */
}

.box {
  background: red;
}
.box:nth-child(even) {
  background: green;
}

<div class="container">
  <div class="box">
    Hello
  </div>
  <div class="box">
    Test
  </div>  
</div>

Otra forma que encontré es aplicar el margen izquierdo como valores negativos, excepto el primer elemento de la fila.

span { 
 display:inline-block;
 width:100px;
 background:blue;
 font-size:30px;
 color:white; 
 text-align:center;
 margin-left:-5px;
}
span:first-child{
 margin:0px;
}

Cada pregunta que intenta eliminar el espacio entre inline-blocks parece una<table> ...

Intenta algo como esto:

p {
  display: table;
}
span {
  width: 100px;
  border: 1px solid silver; /* added for visualization only*/
  display: table-cell;
}

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