¿Por qué existe una brecha inexplicable entre estos elementos div de bloques en línea? [duplicar]
Tengo dos divelementos de bloque en línea, que son iguales, colocados uno al lado del otro. Sin embargo, parece haber un espacio misterioso de 4 píxeles entre los dos divs a pesar de que el margen está establecido en 0. No hay divs principales que los afecten. ¿Qué está pasando?
CSS
#container
{
display:inline-block;
position:relative;
background:rgb(255,100,0);
margin:0px;
width:40%;
height:100px;
}
Así es como quiero que se vea:
En este caso, sus divelementos han sido cambiados de blockelementos de nivel a inlineelementos. Una característica típica de inlinelos elementos es que respetan los espacios en blanco del marcado. Esto explica por qué se genera un hueco de espacio entre los elementos. (ejemplo)
Hay algunas soluciones que se pueden utilizar para resolver esto.
Método 1: eliminar el espacio en blanco del marcado
Ejemplo 1 : comentar el espacio en blanco: (ejemplo)
<div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div>
Ejemplo 2 : eliminar los saltos de línea: (ejemplo)
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
Ejemplo 3 : cerrar parte de la etiqueta en la siguiente línea (ejemplo)
<div>text</div
><div>text</div
><div>text</div
><div>text</div
><div>text</div>
Ejemplo 4 : cerrar toda la etiqueta en la siguiente línea: (ejemplo)
<div>text
</div><div>text
</div><div>text
</div><div>text
</div><div>text
</div>
Método 2: restablecer elfont-size
Dado que el espacio en blanco entre los inlineelementos está determinado por font-size, simplemente puede restablecerlo font-sizey 0así eliminar el espacio entre los elementos.
Simplemente configúrelo font-size: 0en los elementos principales y luego declare uno nuevo font-sizepara 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 elemento secundario font-sizese declara utilizando emunidades. Por lo tanto, recomendaría eliminar los espacios en blanco del marcado o, alternativamente, hacer flotar los elementos y así evitar el espacio generado por inlinelos elementos.
Método 3: establecer el elemento principal endisplay: flex
En algunos casos, también puede establecer el valor displaydel elemento principal en flex. (ejemplo)
Esto elimina efectivamente los espacios entre los elementos en los navegadores compatibles . No olvide agregar los prefijos de proveedores apropiados para obtener soporte adicional.
.parent {
display: flex;
}
.parent > div {
display: inline-block;
padding: 1em;
border: 2px solid #f00;
}
Mostrar fragmento de código
Notas de acompañamiento:
Es increíblemente poco confiable utilizar márgenes negativos para eliminar el espacio entre inlineelementos. No utilice márgenes negativos si existen otras soluciones más óptimas.
El uso inline-blockpermite espacios 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 elemento principal font-sizeen 0 y restablecerlo al tamaño requerido en los elementos del bloque en línea.
Cualquier solución fácil, aunque está un poco desactualizada en este momento, es solo floatel contenedor. (p. ej. float: left;) Por otro lado, cada uno iddebe ser único, lo que significa que no puede usar el mismo iddos veces en el mismo HTMLdocumento. Deberías usar a classen su lugar, donde puedes usar lo mismo classpara múltiples elementos.
.container {
position: relative;
background: rgb(255, 100, 0);
margin: 0;
width: 40%;
height: 100px;
float: left;
}
