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

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

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

Ok, aunque he votado a favor de las respuestas font-size: 0; y not implemented CSS3 feature, después de intentarlo descubrí que ninguno de ellos es una solución real.

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

Entonces Decidí eliminar los espacios (esta respuesta es sobre este argumento) entre los divs inline-block de mi fuente HTML (JSP), cambiando 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 minuto... ¿qué pasa 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 pensable insertar todas esas cosas, significaría{[19]]}

<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 entender, etc...

La solución que encontré:

Utilice comentarios HTML para conectar el final de un div al comienzo de la 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 usted tendrá un legible y código correctamente indentado.

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

Tomemos el primer ejemplo, en mi humilde opinión esto: {[19]]}

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

Es mejor que esto{[19]]}

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

Espero que eso ayude...

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>

Esta es la misma respuesta que di en el relacionado: Display: Inline block - ¿Qué es ese espacio?

En realidad 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 una fuente personalizada con espacios de ancho cero, que le permite contraer el espacio en blanco (agregado por el navegador para los elementos en línea cuando están en líneas separadas) a nivel de fuente utilizando una fuente muy pequeña. Una vez que declare la fuente, simplemente cambie el font-family en el contenedor y de vuelta a 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;
}

Traje a gusto. Aquí hay una descarga de la fuente que acabo de preparar en font-forge y convertido con FontSquirrel webfont generator. Me llevó 5 minutos. Se incluye la declaración css @font-face: fuente zipped zero-width space. Está en Google Drive, por lo que deberá hacer clic en Archivo > Descargar para guardarlo en su computadora. Probablemente también tendrá que cambiar las rutas de fuente si copia la declaración a su archivo css principal.

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

Usar Flexbox

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

• ¿Estamos Listos para Usar Flexbox?
• Uso de cajas flexibles CSS - Guía para desarrolladores web / MDN
• Una Guía completa para Flexbox / CSS-Trucos
• Flexy Cajas-CSS flexbox playground y herramienta de generación de código

Añade display: flex; al elemento padre. Aquí está la solución con un 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>

Actualizar

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>

Dos opciones más basadas en Módulo de Texto CSS Nivel 3 (en lugar de white-space-collapsing:discard que había sido eliminado del borrador de especificaciones):

• word-spacing: -100%;

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

• word-spacing: -1ch;

Acorta los espacios entre palabras por el ancho del dígito '0'. En una fuente monoespaciada 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+.

Fiddle

Desafortunadamente, estamos en 2015 y white-space-collapse todavía no se ha implementado.

Mientras tanto, dar el elemento padre font-size: 0; y establecer el font-size en los hijos. Esto debería hacer el truco

Use flexbox y haga una reserva (de las sugerencias anteriores) para navegadores más antiguos:

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

Font-size:0; puede ser un poco más complicado de manejar...

Creo que el siguiente par de líneas es mucho mejor y más reutilizable, y ahorrador de 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 puede usarlo de la siguiente manera...

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

Por lo que sé (puedo estar equivocado), pero todos los navegadores admiten este método.

EXPLICACIÓN :

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

• usted copie y pegue el código (una vez)
• luego en su html simplemente use class="items" en el padre de cada bloque en línea.

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

Resolviendo dos problemas a la vez.

También tenga en cuenta el > (mayor que el signo) esto significa que */todos los hijos deben ser inline-block.

Http://jsfiddle.net/fD5u3 /

NOTA: He modificado para acomodar a heredar espaciado de letras cuando un wrapper tiene un wrapper hijo.

Simple:

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

No hay necesidad de tocar el elemento padre.

Única condición aquí: el tamaño de fuente del elemento no debe ser definido (debe ser igual al tamaño de fuente del padre).

0.25em es el valor predeterminado word-spacing

W3Schools-propiedad de espaciado de palabras

Aunque, 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 siguiente código 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 /

Tuve este problema en este momento y desde font-size:0; he encontrado que en Internet Explorer 7 el problema sigue siendo porque Internet Explorer piensa "Tamaño de fuente 0?!?! ¿Estás loco?"- Por lo tanto, en mi caso he Eric Meyer CSS reset y con font-size:0.01em; Tengo una diferencia de 1 píxel de Internet Explorer 7 a Firefox 9, así que, creo que esto puede ser una solución.

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

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 usa font-size:0 para el elemento padre y da font-size a un elemento hijo tanto como usted querer.

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 toda la aplicación, pero el último método es una solución infalible para esta situación y se puede usar en cualquier lugar.

No estoy muy seguro si desea hacer dos tramos azules sin un espacio o desea manejar otro espacio 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.

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

En un hilo alternativo vi a un comentarista mencionar que font-size:0 no siempre es ideal porque la gente puede controlar los tamaños mínimos de fuente en sus navegadores, negando por completo la posibilidad de establecer el tamaño de fuente a 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

p {
  display: flex;
}
span {
  float: left;
  display: inline-block;
  width: 100px;
  background: red;
  font-size: 30px;
  color: white;
}

<p>
  <span> hello </span>
  <span> world </span>
</p>

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

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>

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. Aplicar un margin-right: -4px a los elementos de bloque en línea eliminará el espaciado y es compatible con todos los navegadores. Ver el violín actualizado aquí. Para aquellos interesados en usar márgenes negativos, intente dar este una lectura.

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

Css

float: left;

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

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

Así que, 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 mencionó en los comentarios a la respuesta de HBP.

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 Émbolo .

Probé la solución font-size: 0 para un problema similar en React y Sass para un proyecto de Campamento de Código Libre en el que estoy trabajando actualmente.

Y funciona!

Primero, el script:

var ActionBox = React.createClass({
    render: function() {
        return(
            <div id="actionBox">
                </div>
        );
    },
});

var ApplicationGrid = React.createClass({
    render: function() {
        var row = [];
        for(var j=0; j<30; j++){
            for(var i=0; i<30; i++){
                row.push(<ActionBox />);
            }
        }
        return(
            <div id="applicationGrid">
                {row}
            </div>
        );
     },
});

var ButtonsAndGrid = React.createClass({
    render: function() {
        return(
            <div>
                <div id="buttonsDiv">
                </div>
                <ApplicationGrid />
            </div>
        );
    },
});

var MyApp = React.createClass({
    render: function() {
        return(
            <div id="mainDiv">
                <h1> Game of Life! </h1>
                <ButtonsAndGrid />
            </div>
        );
    },
});

ReactDOM.render(
    <MyApp />,
    document.getElementById('GoL')
);

Entonces, el Sass:

html, body
    height: 100%

body
    height: 100%
    margin: 0
    padding: 0

#mainDiv
    width: 80%
    height: 60%
    margin: auto
    padding-top: 5px
    padding-bottom: 5px
    background-color: DeepSkyBlue
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#buttonsDiv
    width: 80%
    height: 60%
    margin: auto
    margin-bottom: 0px
    padding-top: 5px
    padding-bottom: 0px
    background-color: grey
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#applicationGrid
    width: 65%
    height: 50%
    padding-top: 0px
    margin: auto
    font-size: 0
    margin-top: 0px
    padding-bottom: 5px
    background-color: white
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#actionBox
    width: 20px
    height: 20PX
    padding-top: 0px
    display: inline-block
    margin-top: 0px
    padding-bottom: 0px
    background-color: lightgrey
    text-align: center
    border: 2px solid grey
    margin-bottom: 0px

Solo por diversión: una solución fácil de JavaScript.

document.querySelectorAll('.container').forEach(clear);

function clear(element) {
  element.childNodes.forEach(check, element);
}

function check(item) {
  if (item.nodeType === 3) this.removeChild(item);
}

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

<p class="container">
  <span> Foo </span>
  <span> Bar </span>
</p>

Hay muchas soluciones como font-size:0,word-spacing,margin-left,letter-spacing y así sucesivamente.

Normalmente prefiero usar letter-spacing porque

1. parece bien cuando asignamos un valor que es mayor que el ancho del espacio adicional(por ejemplo, -1em).
2. Sin embargo, no estará bien con word-spacing y margin-left cuando establecemos un valor más grande como -1em.
3. Usar font-size no es conveniente cuando intentamos usar em como unidad font-size.

Así que, letter-spacing parece ser el mejor opción.

Sin embargo, tengo que advertirles {[19]]}

Cuando usas letter-spacing es mejor que uses -0.3em o -0.31em no otros.

* {
  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ás usando Chrome (versión de prueba 66.0.3359.139) u Opera (versión de prueba 53.0.2907.99), lo que ves podría ser:

Si estás usando Firefox (60.0.2), IE10 o Edge, lo que ves puede ser:

Eso es interesante. Así que, comprobé el mdn-letter-spacing 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 la implementación. Los agentes de usuario no pueden aumentar o disminuir el espacio entre caracteres para justificar el texto.

Parece que esta es la razón.

Agregue letter-spacing:-4px; en el css principal p y agregue letter-spacing:0px; a su css span.

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>

Una otra manera que encontré es la aplicación de 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 trata de eliminar el espacio entre inline-block s me parece un <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>