¿Por qué este elemento en línea/bloque en línea/flexibilidad en línea/rejilla en línea se empuja hacia abajo?
A continuación se muestra mi código y quiero entender por qué #firstDiv todos los navegadores lo empujan hacia abajo. Realmente quiero entender el funcionamiento interno del hecho de por qué se empuja hacia abajo en lugar de tirar hacia arriba de una forma u otra. (y sé cómo alinear sus tapas :))
Y sé que es lo overflow:hidden;que lo está causando, pero no estoy seguro de por qué lo está empujando divhacia abajo.
body {
width: 350px;
margin: 0px auto;
}
#container {
border: 15px solid orange;
}
#firstDiv {
border: 10px solid brown;
display: inline-block;
width: 70px;
overflow: hidden;
}
#secondDiv {
border: 10px solid skyblue;
float: left;
width: 70px;
}
#thirdDiv {
display: inline-block;
border: 5px solid yellowgreen;
}<div id="container">
<div id="firstDiv">FIRST</div>
<div id="secondDiv">SECOND</div>
<div id="thirdDiv">THIRD
<br>some more content<br> some more content
</div>
</div>http://jsfiddle.net/WGCyu/ .
Básicamente, ha agregado más desorden en su código, lo que está creando más confusión, así que primero trato de eliminar el desorden que dificulta la comprensión del problema real.
En primer lugar tenemos que establecer cuál es la verdadera pregunta.
Es por eso que inline-blockel elemento " " se empuja hacia abajo.
Ahora empezamos a entenderlo y a eliminar el desorden primero.
1 - ¿ Por qué no darles a los tres divs el mismo ancho de borde? Démoslo.
2 - ¿El elemento flotante tiene alguna conexión con el elemento de bloque en línea que se empuja hacia abajo? No, no tiene nada que ver con eso.
Entonces, hemos eliminado ese div por completo . Y está presenciando el mismo comportamiento cuando el elemento de bloque en línea se empuja hacia abajo.
Aquí llega el turno de cierta literatura para comprender la idea de los cuadros de líneas y cómo están alineados en la misma línea, especialmente lea el último párrafo con atención porque ahí está la respuesta a su pregunta.
La línea base de un 'bloque en línea' es la línea base de su último cuadro de línea en el flujo normal, a menos que no tenga cuadros de línea en el flujo o si su propiedad 'desbordamiento' tiene un valor calculado distinto de 'visible', en en cuyo caso la línea de base es el borde del margen inferior.
Si no está seguro de la línea de base , aquí le ofrecemos una breve explicación en palabras sencillas.
Todos los caracteres, excepto 'gjpqy', están escritos en la línea de base. Puede pensar en la línea de base como si dibujara una línea horizontal simple, igual que el subrayado justo debajo de estos "caracteres aleatorios", entonces será la línea de base, pero ahora, si escribe cualquiera de 'gjpqy'. carácter(es) en la misma línea, la parte inferior de estos caracteres quedaría debajo de la línea.
Entonces, podemos decir que todos los caracteres excepto 'gjpqy' están escritos completamente por encima de la línea base, mientras que una parte de estos caracteres están escritos debajo de la línea base.
3- ¿ Por qué no comprobar dónde está la línea base de nuestra línea? He agregado algunos caracteres que muestran la línea base de nuestra línea.
4 - ¿Por qué no agregar también algunos caracteres en nuestros divs para encontrar sus líneas de base en el div? Aquí, se agregaron algunos caracteres en divs para aclarar la línea de base .
Ahora que comprende la línea de base, lea la siguiente versión simplificada sobre la línea de base de los bloques en línea.
i) Si el bloque en línea en cuestión tiene su propiedad de desbordamiento configurada en visible (que es la opción predeterminada, por lo que no es necesario configurarla). Entonces su línea de base sería la línea de base del bloque contenedor de la línea.
ii) Si el bloque en línea en cuestión tiene su propiedad de desbordamiento establecida en DISTINTO DE visible. Entonces su margen inferior estaría en la línea base de la línea del cuadro contenedor.
- Primer punto en detalle
Ahora mire esto nuevamente para aclarar su concepto de lo que está sucediendo con el div verde . Si aún hay alguna confusión, aquí se agregan más caracteres cerca del div verde para establecer la línea de base del bloque contenedor y la línea de base del div verde está alineada.
Bueno, ¿ahora afirmo que tienen la misma línea de base? ¿BIEN?
5 - Entonces, ¿por qué no superponerlos y ver si encajan bien uno encima del otro? Entonces, traigo el tercer div -left: 35px; ¿ Para comprobar si tienen la misma línea de base ahora ?
Ahora hemos demostrado nuestro primer punto.
- Segundo punto en detalle
Bueno, después de la explicación del primer punto, el segundo punto es fácilmente digerible y verá que el primer div que tiene la propiedad de desbordamiento establecida en un valor distinto de visible (oculto) tiene su margen inferior en la línea base de la línea.
Ahora puedes hacer un par de experimentos para ilustrarlo mejor.
- Establezca el primer div overflow:visible (o elimínelo por completo) .
- Establecer desbordamiento del segundo div: distinto del visible .
- Establezca el desbordamiento de ambos divs: distinto de visible .
Ahora recupere su desorden y vea si todo le parece bien.
- Recupere su div flotante (por supuesto, es necesario
aumentar algo de ancho del cuerpo). Verá que no tiene ningún efecto. - Recupera los mismos márgenes impares .
- Establezca el div verde en desbordamiento: visible como lo configuró en su pregunta (esa desalineación se debe al aumento del ancho del borde de 1 px a 5 px, por lo que si ajusta el negativo a la izquierda verá que no hay problema)
- Ahora elimine los caracteres adicionales que agregué para ayudar a comprender . (y por supuesto eliminar el negativo izquierdo)
- Finalmente reduzca el ancho del cuerpo porque ya no necesitamos uno más ancho.
Y ahora volvemos al punto de partida.
Espero haber respondido a tu pregunta.
El valor predeterminado vertical-alignen CSS es baseline& esta regla también se aplica leyendo inline-blockesto http://www.brunildo.org/test/inline-block.html
Escribe vertical-align:topen tu inline-blockDIV.
Mira esto http://jsfiddle.net/WGCyu/1/
Originalmente comencé a responder esta pregunta , pero se bloqueó como engaño antes de que pudiera terminar, así que publico la respuesta aquí.
Primero, necesitamos entender qué inline-blockes.
La definición en MDN dice:
El elemento genera un cuadro de elemento de bloque que fluirá con el contenido circundante como si fuera un único cuadro en línea (comportándose de manera muy similar a como lo haría un elemento reemplazado)
Para comprender lo que está sucediendo aquí, debemos observar vertical-alignsu valor predeterminado baseline.
En esta ilustración tiene esta tabla de colores:
Azul: la línea base
Rojo: la parte superior e inferior de la altura de la línea
Verde: la parte superior e inferior del cuadro de contenido en línea.
En el elemento #left, tiene contenido textual que controla cuál es la línea de base. Esto significa que el texto interior define la línea base para #left.
En la #derecha, no hay contenido, por lo que el navegador no tiene otra opción que usar la parte inferior del cuadro como línea de base.
Vea esta visualización donde dibujé la línea base en un ejemplo donde el primer contenedor en línea tiene algo de texto y el siguiente está vacío:
Si alineas específicamente un elemento con la parte superior, en realidad estás diciendo que alineas la parte superior de este elemento con la parte superior del cuadro de línea.
Esto podría ser más fácil de entender con un ejemplo.
div {
display: inline-block;
width: 100px;
height: 150px;
background: gray;
vertical-align: baseline;
}
div#middle {
vertical-align: top;
height: 50px
}
div#right {
font-size: 30px;
height: 100px
}<div id="left">
<span>groovy</span>
</div>
<div id="middle">groovy</div>
<div id="right">groovy</div>El resultado es este, y agregué la línea base azul y el cuadro de línea roja:
Lo que sucede aquí es que la altura del cuadro de línea depende de cómo se presenta el contenido de toda la línea. Esto significa que para calcular la alineación superior, primero se deben calcular las alineaciones de la línea base. El elemento tiene , por lo que no se utiliza para el posicionamiento de la línea base. pero los y están colocados verticalmente para que sus líneas de base estén alineadas. Cuando se hace esto, la altura del cuadro de línea aumenta, porque el elemento se ha empujado un poco hacia arriba como resultado del tamaño de fuente más grande. Luego se puede calcular la posición superior del elemento, que se encuentra en la parte superior del cuadro de línea.
#middlevertical-align:top#left#right#right#middle
