Instagram | Twitter | LinkedIn
Consider the following code:
What is the distance between those two div ?
A. 20px
B. 40px
C. 60px
馃憖 Click here to see the correct answer and explanation
| Correct Answer | Explanation |
|---|---|
| B 馃帀 | The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing. In this case, because the div is a block-level element it will take the full width of the container, so the distance between the two divs is the vertical distance (margin collapse never applies to horizontal left and right margins). |
Explanation based on 馃憠馃徏 Mastering margin collapsing & Margin Collapse in CSS: What, Why, and How
Considera el siguiente c贸digo:
驴 Cu谩l es la distancia entre los dos div ?
A. 20px
B. 40px
C. 60px
馃憖 Haz click aqu铆 para ver la respuesta correcta y su explicaci贸n
| Respuesta correcta | Explicaci贸n |
|---|---|
| B 馃帀 | Los m谩rgenes superior y inferior de los bloques a veces est谩n combinados (colapsados) en un solo margen cuyo tama帽o es el mayor de los m谩rgenes combinados, un comportamiento conocido como colapso de margen (o margin collapsing en ingl茅s). En este caso, dado que el div es un elemento en bloque, ocupar谩 todo el ancho del contenedor, por lo que la distancia entre los dos divs es vertical (el colapso del margen nunca se aplica a los m谩rgenes horizontales izquierdo y derecho). |
Explicaci贸n basada en 馃憠馃徏 Entendiendo el colapso de margen & Margin Collapse in CSS: What, Why, and How