html - significado - etiqueta span

¿Cómo deshacerse del espacio entre divs cuando se muestra el bloque en línea y se apilan horizontalmente?

Question

Esta pregunta ya tiene una respuesta aquí:

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

Tengo tres divs apilados horizontalmente uno al lado del otro y estos divs están configurados para mostrar: bloque en línea. Sin embargo, he notado que incluso con el uso de algún tipo de restablecimiento de CSS, ¿producen una pequeña distancia de 4px entre sí? ¿Por qué ocurre esto? ¿Hay alguna manera de deshacerse de esto a nivel mundial o tengo que cambiar los divs a la izquierda -4px?

Answer 1

Deshágase de la nueva línea entre el final de la división anterior y el inicio de la siguiente división. Por ejemplo, reemplace lo siguiente:

<div id="div1">
 Div Item 1
</div>
<div id="div2">
 Div Item 2
</div>

con

<div id="div1">
 Div Item 1
</div><div id="div2">
 Div Item 2
</div>

Answer 2

Esto se debe al hecho de que su navegador hará que el DIV esté en línea y, como sucede con las palabras, están separados por espacios.

El ancho del espacio está determinado por el tamaño de la fuente, por lo tanto, un truco fácil es establecer el tamaño de la fuente del elemento que lo contiene en 0 y luego restablecer el tamaño de la fuente en los divs en línea.

#container { font-size: 0; }

#container > div {font-size: 1rem; display: inline-block; }

He demostrado esto en este Fiddle .

Echa un vistazo a este article para más información.

Answer 3

Lo más probable es que tengas nuevas líneas entre los divs en tu HTML, ¿verdad? Si hay separadores entre divs, el navegador mostrará espacios entre ellos.

El siguiente ejemplo tiene espacios entre los divs:

<style>
* {
    margin: 0;
    border: 1px solid black;
}

div {
    display: inline-block;
}
</style>

<div>
Div1
</div>

<div>
Div2
</div>

<div>
Div3
</div>

Hay dos métodos que puede utilizar para eliminar los espacios entre los divs. O bien quita los separadores entre los elementos div de esta manera:

<div>
Div1
</div><div>
Div2
</div><div>
Div3
</div>

O haz tus elementos flotantes divs:

...
div {
    display: inline-block;
    float: left;
}
...

¡Espero que ayude!

Editar:
Consulte también la pregunta SO relacionada: ¿Cómo puedo evitar que la nueva línea agregue un espacio entre los elementos de mi lista en HTML?

Answer 4

Supongamos que se debe a los caracteres de salto de línea después de cada etiqueta de cierre. Esos son manejados como espacios en HTML. Intenta eliminarlos. Aquí hay algunas demos:

http://jsfiddle.net/eeRFC/ - con espacios

<div>test</div>
<div>test</div>
<div>test</div>

http://jsfiddle.net/eeRFC/1/ - sin espacios

<div>test
</div><div>test
</div><div>test
</div>

Y CSS común:

div {
  border:solid 1px black;
  display:inline-block;
}

Answer 5

Usando float:left o display:inline-block funcionaría. Por favor, consulte el enlace de ejemplo de trabajo here .