Pregunta ¿Por qué el bloque en línea hace que este div tenga altura?


jsFiddle Demo

Parece que no puedo entender por qué usar display:inline-block causaría esto <div> Elemento para ganar altura de algún modo cuando su elemento contenedor estaba oculto. Esto no ocurre con display:block.

html:

<div style="display:inline-block;"><input type="hidden" /></div>
<div>Gap above created by inline-block</div>
<div style="display:block;"><input type="hidden" /></div>
<div>No gap above if using block</div>

screenshot of jsfiddle

Por que display:inline-block causa la brecha aquí representada?


32
2017-11-20 20:33


origen


Respuestas:


Ok, como ya mencioné muy brevemente en los comentarios:

bloque en línea

Este valor hace que un elemento genere un bloque de nivel en línea   envase. El interior de un bloque en línea está formateado como un cuadro de bloque,   y el elemento en sí está formateado como un cuadro atómico de nivel en línea.

en línea

Este valor hace que un elemento genere uno o más cuadros en línea.

La parte más importante de este tema sería que el elemento en sí se formatee, no solo el contenido. Cada bloque en línea elemento será visto como caja atómica en línea y así ocupar espacio.

Fuente: http://www.w3.org/TR/CSS2/visuren.html#inline-boxes


5
2017-11-20 21:11



Una cosa que sucede cuando creas un display:inline-block es que el line-height los cálculos cambiarán:

En un contexto de formato en línea, las cajas se disponen horizontalmente, una   después del otro, comenzando en la parte superior de un bloque contenedor.   Los márgenes horizontales, bordes y relleno se respetan entre estos   cajas. Los cuadros pueden alinearse verticalmente de diferentes maneras: su   las partes inferiores o superiores pueden estar alineadas, o las líneas de base del texto dentro de ellos   puede estar alineado.

fuente: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Se calcula la altura de cada cuadro de nivel en línea en el cuadro de línea. por   elementos reemplazados, elementos de bloque en línea y elementos de tabla en línea,   esta es la altura de su cuadro de margen; para cajas en línea, esto es   su 'altura de línea'.

fuente: http://www.w3.org/TR/CSS2/visudet.html#line-height

CSS supone que cada fuente tiene métricas de fuente que especifican un   altura característica por encima de la línea de base y una profundidad debajo de ella. En esto   sección utilizamos A para referirnos a esa altura (para una fuente determinada dada   tamaño) y D la profundidad. También definimos AD = A + D, la distancia desde   de arriba a abajo.

fuente: http://www.w3.org/TR/CSS2/visudet.html#inline-box-height

Por lo tanto, la altura de la línea se definirá en su tipo de fuente. Sin embargo cuando el inline-block está vacío tendrá su básico line-height. Sin embargo, todavía trata de generar su line-height con una fuente.

Para solucionarlo rápidamente, puede usar un contenedor que defina de forma exclusiva que no hay fuente, por lo que no line-height que lleva a ninguna altura:

.wrapper
{
    font-size: 0;
}

Donde puede restablecer esta propiedad en su inline-block:

.wrapper div
{
    font-size: medium;
}

Donde el valor predeterminado de font-size es medio

jsFiddle

De esta forma, puedes usar contenido en el inline-block sin que haya una brecha


Actualizar

Esta actualización se debe a Comentario de Kevin Wheelers 

... Estoy confundido, todavía nunca dice cuál es la altura de un elemento de bloque en línea vacío. ...

Quiero señalar que no he encontrado ninguna documentación oficial sobre esto, aunque a través de las pruebas he encontrado patrones comunes.


Version corta:

Solo piense en eso como inline-block espera contenido y reserva un espacio de línea mínimo basado en lo conocido line-height.


Algo más de conocimiento:

JsFiddle como un ejemplo más claro

Como puedes ver el gab de la inline-block la altura se basa en line-height, que hemos decidido en la primera publicación.

Ahora, ¿dónde está esto? line-height ¿viene de?

Se hereda de la primera que determina el line-height: el <body> elemento.

Puedes probar esto mi cambio font-size, font-family o el line-height del <body> elemento.

Entonces se reserva line-box porque es contenido Lo cual es extraño que sea visible en absoluto, como se puede ver de acuerdo con el W3 especificaciones de formato en línea:

Cajas de líneas que no contienen texto, sin espacio en blanco preservado, sin elementos en línea con márgenes, relleno o bordes distintos de cero, y ningún otro contenido de flujo (como imágenes, bloques en línea o tablas en línea), y no terminan con una nueva línea preservada se debe tratar como recuadros de línea de altura cero para los propósitos de determinar las posiciones de cualquier elemento dentro de ellos, y debe tratarse como no existente para cualquier otro propósito.

Hace esto para cada otro elemento dentro de la inline-block, pero siempre parece reservar un espacio de línea mínimo.


32
2017-11-20 21:17



Aparentemente, display:inline-block por defecto se establece un visual height basado en su padre line-height. La solución crea un contenedor primario con estas propiedades:

#container {
  line-height:0;
}

La demo http://jsfiddle.net/FE3Gy/33/ . Aquí puedes verificar un ejemplo con diferentes font-size valores.

De acuerdo con el W3 es:

El interior de un bloque en línea está formateado como un cuadro de bloque, y el elemento en sí está formateado como un cuadro atómico de nivel en línea.

Acerca de la caja en línea aquí

El ancho de un cuadro de línea está determinado por un bloque contenedor y la presencia de flotadores. La altura de un recuadro de línea está determinada por las reglas dadas en la sección de cálculos de altura de línea.

Para que pueda consultar más sobre line-height aquí :

http://www.w3.org/TR/CSS2/visudet.html#line-height


5
2017-11-20 20:56



Obtendrá una línea real, ya sea que tenga una entrada oculta o un espacio o lo que sea, su navegador cree que se trata de un contenido en línea, por lo tanto, obtiene una línea.

http://jsfiddle.net/FE3Gy/7/

<div style="display:inline-block;"> </div><div>Gap above created by inline-block</div>
<div style="display:block;"><input type="hidden" /></div>
<div>No gap above if using block</div>

Incluso si no tienes absolutamente nada, obtendrás una línea. display: inline-block lo convierte en contenido en línea.

http://jsfiddle.net/FE3Gy/15/


4
2017-11-20 20:37



Layne y Nate tienen la respuesta correcta, pero quería llamar su atención sobre esta cláusula de la especificación CSS 2.1, sección 9.4.2.

Los cuadros de línea se crean según sea necesario para mantener el contenido dentro del nivel dentro de   un contexto de formato en línea. Cajas de líneas que no contienen texto, no   espacio en blanco preservado, sin elementos en línea con márgenes distintos de cero,   relleno, o bordes, y ningún otro contenido de flujo (como imágenes,   bloques en línea o tablas en línea), y no terminan con un preservado   nueva línea debe tratarse como cuadros de líneas de altura cero para los fines de   determinar las posiciones de cualquier elemento dentro de ellos, y debe ser   tratado como no existente para cualquier otro propósito.

Palmos (inline elementos) que no tienen contenido en flujo (<input type="hidden" /> es display:none por lo tanto, no pueden tratarse como contenido de flujo) cumplen esos criterios, por lo que sus líneas de cuadros que contienen se tratan como 0 de altura o inexistentes. inline-block los elementos están explícitamente excluidos de cumplir esos criterios, por lo que el elemento de bloque en línea crea un cuadro de línea que debe tener una altura de línea alta.

Tenga en cuenta que puede ver esto en acción de otra manera al agregar un borde a un elemento span para que no cumpla con los criterios anteriores. Ver http://jsfiddle.net/FE3Gy/36/


1
2017-11-20 22:31



display: inline-block tiene un comportamiento diferente al de display: block. Mientras el bloque crea un elemento de cuadro, el bloque en línea crea un cuadro, pero agrega contenido circundante como si fuera un único elemento en línea. Este contenido circundante podría ser la fuente de su problema. Creo que a menos que tengas una razón muy específica para usar inline-block, deberías usar display: block.


0
2017-11-20 20:45



Como se mencionó anteriormente por @nkmol, lleva el tamaño de fuente predeterminado y la altura de línea, lo que provoca una altura innecesaria para el elemento primario. En algunos casos, line-height: 0 resuelve el problema. Pero a veces, en casos excepcionales, como una etiqueta vacía dentro de un padre

<div>
<a href=''></a>
</div>

En el caso anterior, simplemente estableciendo el tamaño de fuente: 0 o altura de línea: 0 no resuelve el problema como la etiqueta a.

vertical-align: middle;

soluciona el problema en tal caso.


0
2017-12-16 08:38