¿Por qué hay una brecha inexplicable entre estos elementos Div de bloque en línea?

Tengo dos elementos div bloque en línea, que son los mismos, colocados uno al lado del otro. Sin embargo, parece que hay un espacio misterioso de 4 píxeles entre los dos div a pesar de que el margen se establece en 0. No hay divs parentales que los afecten. ¿Qué está pasando?

CSS

 #container { display:inline-block; position:relative; background:rgb(255,100,0); margin:0px; width:40%; height:100px; } 

Problema Div

Esto es lo que quiero que se vea así:

Lo que DEBERÍA verse

En este caso, sus elementos div han sido cambiados de elementos de nivel de block elementos en inline . Una característica típica de los elementos en inline es que respetan el espacio en blanco en el marcado. Esto explica por qué se genera una brecha de espacio entre los elementos. (ejemplo)

Hay algunas soluciones que se pueden usar para resolver esto.

Método 1 – Eliminar el espacio en blanco del marcado

Ejemplo 1 – Comente el espacio en blanco: (ejemplo)

 
text
text
text
text
text

Ejemplo 2 – Eliminar los saltos de línea: (ejemplo)

 
text
text
text
text
text

Ejemplo 3 – Cerrar parte de la etiqueta en la siguiente línea (ejemplo)

 
text
text
text
text
text

Ejemplo 4 – Cierre la etiqueta completa en la siguiente línea: (ejemplo)

 
text
text
text
text
text

Método 2 – Restablecer el font-size

Dado que el espacio en blanco entre los elementos en inline está determinado por el font-size , simplemente puede restablecer el font-size a 0 , y así eliminar el espacio entre los elementos.

Simplemente configure font-size: 0 en los elementos principales y luego declare un nuevo font-size de font-size para los elementos secundarios. Esto funciona, como se demuestra aquí (ejemplo)

 #parent { font-size: 0; } #child { font-size: 16px; } 

Este método funciona bastante bien, ya que no requiere un cambio en el marcado; sin embargo, no funciona si el font-size de font-size del elemento secundario se declara usando unidades em . Por lo tanto, recomendaría eliminar los espacios en blanco de la marca, o alternativamente flotar los elementos y así evitar el espacio generado por los elementos en inline .

Método 3: configure el elemento principal para display: flex

En algunos casos, también puede establecer que la display del elemento principal sea flex . (ejemplo)

Esto elimina efectivamente los espacios entre los elementos en los navegadores compatibles . No olvide agregar los prefijos de proveedor apropiados para soporte adicional.

 .parent { display: flex; } .parent > div { display: inline-block; padding: 1em; border: 2px solid #f00; } 
 .parent { display: flex; } .parent > div { display: inline-block; padding: 1em; border: 2px solid #f00; } 
 
text
text
text
text
text

El uso inline-block permite espacio en blanco en su HTML, Esto generalmente equivale a .25em (o 4px).

Puede comentar el espacio en blanco o, una solución más común, establecer el font-size de font-size del padre en 0 y restablecerlo de nuevo al tamaño requerido en los elementos de bloque en línea.

inline-block permite automáticamente espacios en blanco como todos dicen. La solución más sencilla es simplemente agregar float: left; a la statement del contenedor como esta. Además, no puede usar dos identificadores en una página. Use clases en su lugar.

 .container { display: inline-block; position: relative; background: rgb(255, 100, 0); margin: 0; width: 40%; height: 100px; float: left; } 

Encontré una solución que no involucraba a Flex, porque Flex no funciona en navegadores anteriores. Ejemplo:

 .container { display:block; position:relative; height:150px; width:1024px; margin:0 auto; padding:0px; border:0px; background:#ececec; margin-bottom:10px; text-align:justify; box-sizing:border-box; white-space:nowrap; font-size:0pt; letter-spacing:-1em; } .cols { display:inline-block; position:relative; width:32%; height:100%; margin:0 auto; margin-right:2%; border:0px; background:lightgreen; box-sizing:border-box; padding:10px; font-size:10pt; letter-spacing:normal; } .cols:last-child { margin-right:0; } 

simplemente agregue un borde: 2px solid #e60000 ; a su segunda div etiqueta CSS.

Definitivamente funciona

 #Div2Id { border: 2px solid #e60000; --> color is your preference } 

Necesitas agregar

 #container { display:inline-block; position:relative; background:rgb(255,100,0); margin:0px; width:40%; height:100px; margin-right:-4px; } 

porque cada vez que escribes display:inline-block toma un margin-right:4px adicional margin-right:4px . Entonces, necesitas eliminarlo.