html - usar - Por qué display=inline-block agrega márgenes verticales incontrolables
inline block en html (4)
Estoy intentando solucionar mi problema en http://jsfiddle.net y tengo un comportamiento extraño allí. ¿Podría explicar de dónde provienen estos márgenes verticales ( http://jsfiddle.net/C6V3S/ )? Aparece en jsfiddle.net (al menos en Chrome y FF), no aparece al copiar / pegar en un archivo local independiente ...
Funciona bien después de cambiar a bloque simple
Ejemplo de archivo de prueba independiente: .btn {padding: 0px; borde: 1px rojo sólido; pantalla: bloque en línea; }
.txt {
display: inline-block;
width: 12px;
height: 12px;
border: none;
padding: 0;
margin: 0;
background: #77FF77;
}
</style>
<div class="btn"><div class="txt"></div></div>
Cuando .btn inline-block elemento .txt , se toma en el flujo de texto del elemento .btn principal. En ese punto, la altura de línea de .btn , que es más grande que la altura del elemento .txt .
Entonces, agregue .btn {line-height: 10px;} (por ejemplo) y su problema se solucionará. Vi que ya intentaste influir en la altura de la línea del elemento .txt interno, por lo que estuviste muy cerca de tus intentos. El ajuste del tamaño de fuente también funcionaría, ya que la altura de línea predeterminada se basa en la fórmula en el tamaño de fuente. De todos modos, la clave es hacerlo en el elemento padre, no en el elemento hijo.
No tiene este problema cuando hace que el elemento interno se convierta en un block , porque entonces no hay contenido de tipo texto, por lo que no se aplica la altura de línea.
Es "cómo funciona", pero puede ser resuelto. La forma más fácil de solucionarlo sería establecer márgenes negativos en .btn . Debería funcionar para cualquier navegador moderno (IE8 y superior, si recuerdo). Flotando los elementos deberías lograr lo que quieres, también. Como una solución totalmente diferente si su problema es meramente estético, puede simplemente envolver los elementos en un padre, establecer el background-color de background-color del padre en lo que desee y no preocuparse por los fondos de los elementos secundarios. Serán transparentes para lo que esté debajo de ellos, y te desharás de esos cortes visuales.
Si desea mantener los márgenes negativos en display: inline-block , pero necesita que el primer elemento molesto no salte hacia la izquierda de su padre, puede apuntarlo explícitamente:
.btn {
margin-left: -4px;
}
.btn:first-of-type {
margin-left: 0px;
}
Edición: Después de leer otra respuesta, no estoy seguro de haber entendido la pregunta: ¿te refieres al margen sobre los elementos (que sería horizontal) o al margen a los lados (vertical)?
Esto no se debe al espacio en blanco (no tiene ninguno dentro de los div s en su HTML), ni al poner inline-block en inline-block dentro de otro inline-block en inline-block . Esto se debe a la line-height de la línea del div exterior. Como puede ver en el violín a continuación, la line-height de line-height actual de la división de borde rojo tiene una line-height que está configurando el navegador (y varía de un navegador a otro), y siempre que haya algo dentro del div que ocupa espacio como un elemento en inline o en inline-block , la height se verá afectada por la line-height .
Hay muchas maneras de evitar esto, y casi todos hacen lo mismo:
1) Saque el elemento interno fuera de flujo, y luego vuelva a insertarlo. Esto hará que el div exterior piense que no hay nada dentro de él, y trate de volverse lo más pequeño posible, y luego rellene el espacio exactamente alrededor del elemento cuando se insertó nuevamente. La forma más fácil de hacerlo es float .
2) Hacer que el elemento exterior no ocupe espacio. Esto hará que el elemento interior defina la height y el width de su padre. Si font-size: 0 , como se mencionó anteriormente, esto hará que el elemento externo piense que el elemento interno en línea no ocupa espacio y, por lo tanto, no ocupa ningún espacio en sí mismo, y se enrolla alrededor del elemento interno. Esto se puede hacer también configurando line-height: 0 (que es una solución perfecta para el problema, ya que el problema es line-height ).
Hay otras formas de hacer que el elemento padre no tenga su line-height , pero eso debería comenzar.
inline-block es brillante y conveniente para muchos casos. Pero vienen con una trampa molesta: espacios en blanco innecesarios . A medida que anida un bloque en línea dentro de un bloque en línea, esto resulta en un desastre de espacios en blanco. Puedes leer todo sobre espacios en blanco y bloques en línea en el blog de David Walsh .
Hay muchas formas de manejar esto, pero mi solución favorita (y la más ampliamente compatible) es configurarlo para el elemento de inline-block principal:
.btn {
font-size: 0;
}
Aquí hay un ejemplo de antes / después: http://jsfiddle.net/C6V3S/1/