html - significado - ¿Por qué hay una brecha inexplicable entre estos elementos div de bloque en línea?
etiquetas span en html (6)
Tengo dos elementos div bloque en línea, que son iguales, colocados uno junto al otro. Sin embargo, parece que hay un espacio misterioso de 4 píxeles entre los dos divs, a pesar de que el margen se establece en 0. No hay divis 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;
}
Esto es lo que quiero que se vea:
El uso inline-block permite espacios en blanco en su HTML, lo que generalmente equivale a .25em (o 4px).
Puede comentar el espacio en blanco o, una solución más común, es establecer el font-size de font-size en 0 y restablecerlo al tamaño requerido en los elementos de bloque en línea.
En este caso, sus elementos div se han cambiado de elementos de nivel de block elementos en inline . Una característica típica de los elementos en inline es que respetan los espacios en blanco en el marcado. Esto explica por qué se genera una brecha de espacio entre los elementos. (example)
Hay algunas soluciones que pueden usarse para resolver esto.
Método 1 - Eliminar el espacio en blanco de la marca
Ejemplo 1 - Comente el espacio en blanco: (example)
<div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div>
Ejemplo 2 - Eliminar los saltos de línea: (example)
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
Ejemplo 3 - Cierre parte de la etiqueta en la siguiente línea (example)
<div>text</div
><div>text</div
><div>text</div
><div>text</div
><div>text</div>
Ejemplo 4 : cierre la etiqueta completa en la siguiente línea: (example)
<div>text
</div><div>text
</div><div>text
</div><div>text
</div><div>text
</div>
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í (example)
#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 hijo se declara utilizando unidades em . Por lo tanto, recomendaría eliminar el espacio en blanco del marcado, o alternativamente, flotar los elementos y así evitar el espacio generado por los elementos en inline .
Método 3 - Establecer el elemento padre para display: flex
En algunos casos, también puede configurar la display del elemento padre para flex . (example)
Esto elimina efectivamente los espacios entre los elementos en los navegadores compatibles . No olvide agregar los prefijos de proveedores 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;
}
<div class="parent">
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
</div>
Notas de los lados:
Es increíblemente poco confiable usar márgenes negativos para eliminar el espacio entre los elementos en inline . No utilice márgenes negativos si existen otras soluciones más óptimas.
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 escribe display:inline-block toma un margin-right:4px adicional margin-right:4px . Por lo tanto, necesita eliminarlo.
Se encontró una solución que no involucra a Flex, porque Flex no funciona en navegadores más antiguos. 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 añada un borde: 2px solid #e60000 ; a su 2do div etiqueta CSS.
Definitivamente funciona
#Div2Id {
border: 2px solid #e60000; --> color is your preference
}
inline-block establece automáticamente un white-space predeterminado como todos dicen. (Esto se debe a las propiedades "en línea" de los elementos, lo mismo que el espacio entre las palabras en una cadena de texto en su marca HTML . Por eso, eliminar white-space en white-space en la marca también funciona.) La solución más sencilla es simplemente float envase. (por ejemplo, float: left; ) En otra nota, cada id debe ser única, lo que significa que no puede usar la misma id dos veces en el mismo documento HTML . Debería usar clases en su lugar, donde puede usar la misma class para múltiples elementos.
.container {
display: inline-block;
position: relative;
background: rgb(255, 100, 0);
margin: 0;
width: 40%;
height: 100px;
float: left;
}