¿Por qué se empuja hacia abajo este elemento de bloque en línea?

A continuación está mi código y quiero entender por qué #firstDiv está siendo empujado hacia abajo por todos los navegadores. Realmente quiero entender el funcionamiento interno del hecho de por qué es empujado hacia abajo en lugar de empujarlo hacia arriba de una forma u otra. (y sé cómo alinear sus tops :))

Y sé que su desbordamiento: oculto que lo está causando, pero no estoy seguro de por qué empuja esa div hacia abajo.

FIRST
SECOND
THIRD
some more content
some more content
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; }

http://jsfiddle.net/WGCyu/ .

Básicamente, has agregado más desorden en tu código, lo que crea más confusión, así que primero bash eliminar el desorden que dificulta entender el problema real.

Antes que nada, tenemos que establecer que ¿cuál es la verdadera pregunta? Es por eso que el elemento “en inline-block ” se empuja hacia abajo.

Ahora comenzamos a entenderlo y eliminar el desorden primero.

1 – ¿Por qué no le das 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 usted está presenciando el mismo comportamiento del elemento de bloque en línea que se empuja hacia abajo.

Aquí llega el turno de algo de literatura para captar la idea de los recuadros de líneas y cómo están alineados en la misma línea, especialmente el último párrafo, porque ahí reside la respuesta a su pregunta.

La línea de base de un ‘bloque en línea’ es la línea de base de su último recuadro de línea en el flujo normal, a menos que no tenga recuadros de línea en flujo o si su propiedad ‘desbordamiento’ tiene un valor calculado distinto de ‘visible’, en en ese caso, la línea de base es el margen inferior del margen.

Si no está seguro acerca de la línea de base , aquí hay una breve explicación en palabras simples.

Todos los caracteres, excepto ‘gjpqy’, están escritos en la línea base, puedes pensar en la línea base como si dibujases una línea horizontal simple, como debajo de estos “caracteres aleatorios”, entonces será la línea de base pero ahora si escribes cualquiera de ‘gjpqy’ personaje (s) en la misma línea, entonces la parte inferior de estos caracteres caería por debajo de la línea.

Por lo tanto, podemos decir que todos los caracteres excepto ‘gjpqy’ se escriben completamente por encima de la línea base, mientras que parte de estos caracteres se escriben debajo de la línea base.

3 – ¿Por qué no verificar 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 algunos caracteres en nuestros divs también para encontrar sus líneas de base en el div? Aquí, algunos personajes se agregaron en divs para aclarar la línea de base .

Ahora, cuando comprenda 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 establecida en visible (que es por defecto, por lo que no es necesario establecerla). Entonces su línea base sería la línea base del bloque contenedor de la línea.

ii) Si el bloque en línea en cuestión tiene su propiedad de desbordamiento configurada en OTRA QUE EN LA VISTA. Entonces su margen inferior estaría en la línea de base de la línea de caja contenedora.

  • Primer punto en detalle

Ahora mira esto de nuevo para aclarar tu concepto de que lo que está sucediendo con div verde . Si todavía hay confusión, aquí se agregan más caracteres cerca de div verde para establecer la línea de base del bloque que lo contiene y la línea de base div verde está alineada.

Bueno, ahora estoy afirmando que tienen la misma línea de base? ¿DERECHO?

5 – Entonces, ¿por qué no superponerlos y ver si encajan uno en el otro? Entonces, traigo el tercer div -left: 35px; para comprobar si ahora tienen la misma línea de base ?

Ahora, tenemos nuestro primer punto probado.

  • Segundo punto en detalle

Bueno, después de la explicación del primer punto, el segundo punto es fácilmente digerible y ves que el primer div que tiene una propiedad de desbordamiento establecida en otra que no sea visible (oculta) tiene su margen inferior en la línea base de la línea.

Ahora, puedes hacer un par de experimentos para ilustrarlo más.

  1. Establezca el primer desbordamiento de div: visible (o elimínelo por completo) .
  2. Establezca el segundo desbordamiento de div: distinto de visible .
  3. Establezca ambos desbordamientos de divs: distintos de los visibles .

Ahora recupere su desorden y vea si todo le parece bien.

  1. Devuelve tu div flotante (por supuesto hay necesidad de
    boost el ancho del cuerpo) Ves que no tiene ningún efecto.
  2. Trae los mismos márgenes impares .
  3. Establezca el div verde para desbordamiento: visible como establece en su pregunta (que la desalineación se debe al aumento del ancho del borde de 1px a 5px, por lo que si ajusta el negativo a la izquierda , verá que no hay problema)
  4. Ahora elimine los caracteres adicionales que agregué para ayudarme a comprender . (y por supuesto eliminar negativo a la izquierda)
  5. Finalmente, reduzca el ancho del cuerpo porque ya no necesitamos uno más ancho.

Y ahora estamos de vuelta a donde comenzamos.

Espero haber respondido tu pregunta.

El valor predeterminado para vertical-align en CSS es la baseline y esta regla también se aplica con inline-block Lee este http://www.brunildo.org/test/inline-block.html

Escribe vertical-align:top en tu DIV de inline-block en inline-block .

Mira esto http://jsfiddle.net/WGCyu/1/

Simplemente use vertical-align:top;

Manifestación

Vea este ejemplo alternativo. La razón de tal comportamiento se describe en el módulo CSS3: línea: 3.2. Envoltura de caja de línea [1] :

En general, el borde inicial de un recuadro de línea toca el borde inicial de su bloque contenedor y el borde final toca el borde final de su bloque contenedor. Sin embargo, las cajas flotantes pueden venir entre el borde del bloque contenedor y el borde del cuadro de línea. Por lo tanto, aunque los recuadros de línea en el mismo contexto de formato en línea generalmente tienen el mismo avance de progresión en línea (el del bloque que los contiene), pueden variar si están disponibles en línea: el espacio de progresión se reduce debido a los flotantes […]

Como puede ver, el tercer elemento se empuja hacia abajo, aunque no tiene una propiedad de overflow . La razón debe estar en otro lugar para encontrar. El segundo comportamiento que observa se describe en Hojas de Estilo en Cascada Nivel 2 Revisión 1 (CSS 2.1) Especificación: 9.5 Flotadores [2] :

Como un flotador no está en el flujo, las cajas de bloques no posicionadas creadas antes y después de la caja flotante fluyen verticalmente como si el flotador no existiera. Sin embargo, los cuadros de líneas actuales y posteriores creados junto al flotador se acortan según sea necesario para dejar espacio para el cuadro de margen del flotante.

Toda su display:inline-block; los divs están usando un tipo especial de baseline en este caso 10.8 Cálculos de altura de línea: las propiedades ‘line-height’ y ‘vertical-align’ (extremo) [3] :

La línea de base de un ‘bloque en línea’ es la línea de base de su último recuadro de línea en el flujo normal, a menos que no tenga recuadros de línea en flujo o si su propiedad ‘desbordamiento’ tiene un valor calculado distinto de ‘visible’, en en ese caso, la línea de base es el margen inferior del margen.

Por lo tanto, cuando utilice elementos flotantes y elementos inline-block , el elemento flotante se desplazará hacia un lado y el formato en línea se volverá a calcular de acuerdo con 1 . Por otro lado, los siguientes elementos se acortan si no caben. Como ya está trabajando con una cantidad mínima de espacio, no hay otra manera de modificar sus elementos y luego empujarlos 2 . En este caso, el elemento más alto definirá el tamaño de su div de envoltura, definiendo así la baseline de baseline 3 , mientras que, por otro lado, la modificación de posición y anchura establecida en 2 no podrá aplicarse a dichos elementos de altura máxima mínima espaciada. En este caso, se producirá un comportamiento como en mi primera demostración.

Por último, la razón por la cual su overflow:hidden evitará que #firstDiv sea ​​empujado al borde inferior de su #container , aunque no pude encontrar un motivo en la sección 11 . Sin overflow:hidden funciona como exceptuado y definido por 2 y 3 . Manifestación

TL; DR: Eche un vistazo muy de cerca a las recomendaciones W3 y las implementaciones en el navegador. En mi humilde opinión, los elementos flotantes están determinados a mostrar un comportamiento inesperado si no conoces todos los cambios que hacen a los elementos que te rodean. Aquí hay otra demostración que muestra un problema común con flotadores.

el problema es porque has aplicado float: left en el segundo div. que hace que el segundo div venga del lado izquierdo y tu primer div cae y viene después de tu segundo div. Si aplica flotación: se dejó en el primer div también, su problema desaparecerá.

overflow: hidden no está causando ningún problema en su diseño, overflow: hidden afecta solo los elementos internos de un div, no tiene nada que ver con otros elementos que están fuera.

Intente agregar padding:0; al cuerpo y eliminando el margen de tus divs.

Agregue background-color:*any color aparte del fondo * para verificar la diferencia.

Intente hacer todas las propiedades CSS de todos los elementos iguales.

Tuve un problema similar y, mientras lo solucionaba, identifiqué que estaba abandonando una propiedad de Elemento con Fuente en el Elemento Div.

Después de descartar esa propiedad de Elemento con Fuente, la alineación de todo DIV se alteró. Para solucionar esto, establecí la propiedad de Fuente en todos los elementos DIV al igual que el elemento que se coloca en él.

En el siguiente ejemplo, el elemento descartado de la clase “.dldCuboidButton” se definió con font-size: 30 px.

Así que agregué la misma propiedad a las clases restantes, es decir, .cuboidRecycle, .liCollect, .dldCollect que utilizan los elementos DIV. De esta forma, todos los elementos DIV siguen las mismas medidas antes y después de colocar el elemento en él.

 .cuboidRecycle { height:40px; width:'20px; float:right'; overflow:'none'; background-color:#cab287; color:#ffffff; border-radius:8px; text-align:'center'; vertical-align:'top'; display: inline-block; font-size: 30px; /* Set a font-size */ } .liCollect { height:40px; width:'20px; float:right'; overflow:'none'; background-color:#cab287; color:#ffffff; border-radius:8px; text-align:'center'; vertical-align:'top'; display: inline-block; font-size: 30px; /* Set a font-size */ } .dldCollect { height:40px; width:'20px; float:right'; overflow:'none'; background-color:#009933; color:#ffffff; border-radius:8px; text-align:'center'; vertical-align:'top'; display: inline-block; font-size: 30px; /* Set a font-size */ } .dldCuboidButton { background-color: #7c6436; color: white; /* White text */ font-size: 30px; /* Set a font-size */ border-radius: 8px; margin-top: 1px; } 

Aquí está el ejemplo de HTML creado dinámicamente usando el CSS anterior.

 $("div#tabs").append( "
#" + uniqueId + "" + "" + "
Trash bin
" + "
Drop Template Manifest Cuboid here
" + "
Drop Template Cuboids here..
" + "
" );

Originalmente comencé a responder esta pregunta , pero estaba cerrada como una estafa antes de que pudiera terminar, así que publico la respuesta aquí.

Primero, necesitamos entender qué es el inline-block .
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 solo cuadro en línea (se comporta de forma muy similar a como lo haría un elemento reemplazado)

Para entender lo que está sucediendo aquí, tenemos que mirar vertical-align , y es valor de baseline defecto.

visualizaciones de posición vertical
En esta ilustración, tienes esta tabla de colores:
Azul: la línea de base
Rojo: la parte superior e inferior de la línea-altura
Verde: la parte superior e inferior del cuadro de contenido en línea.

En el elemento #left, tienes algo de contenido textual que controla lo que es la línea base. Esto significa que el texto dentro define la línea de base para #left.
En el #derecho, no hay contenido, por lo que el navegador no tiene otra opción que utilizar el cuadro inferior como línea de base.

Se esta visualización donde he dibujado la línea de base en un ejemplo donde el primer contenedor en línea tiene algo de texto, y el siguiente está vacío:

Línea de base dibujada

Si alinea específicamente un elemento a la parte superior, realmente dice que alinea la parte superior de este elemento en la parte superior del recuadro de la 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 } 
 
groovy
groovy