Desbordamiento y Colapso de margenes
Overflow
La propiedad CSS overflow
especifica: si recortar contenido, dibujar barras de desplazamiento o mostrar el contenido excedente en un elemento a nivel de bloque. Es un shorthand que engloba overflow-x
y overflow-y
.
Es la propiedad que controla que debe hacer la caja cuando su contenido se desborda del contenedor
Usando la propiedad overflow
con un valor distinto a visible
, valor por defecto, crearรก un nuevo contexto de formatos de bloques. Esto es tรฉcnicamente necesario debido a que si un elemento flotante interceptara con otros forzarรญa a reajustar el contenido alrededor de los elementos que se interceden. El reajuste sucederรญa luego de cada desplazamiento, y llevarรญa a un desplazamiento demasiado lento.
Por defecto, el navegador desborda el contenido del elemento, sin embargo, nosotros podemos decidir que hacer:
visible
: No se controla el desbordamiento, el contenido simplemente se desborda. Valor por defecto.hidden
: Oculta el contenido desbordado y las barras de desplazamiento del elemento.clip
: Igual quehidden
, pero no permite desplazamiento mediante programaciรณn.scroll
: Oculta el contenido desbordado y muestra barras de desplazamiento.auto
: El navegador decide. Generalmente, aplicascroll.
Ten en cuenta que overflow-x
aplica estos valores a la barra de desplazamiento horizontal, overflow-y
a la barra de desplazamiento vertical, mientras que overflow
puedes utilizarlo con un parรกmetro para indicar el mismo valor a ambos ejes, o con dos parรกmetros para indicar uno para overflow-x
y otro para overflow-y
respectivamente
Colapso de margenes
Ahora bien, cuando dos elementos de bloque HTML tienen mรกrgenes verticales que se tocan entre sรญ, estos dos mรกrgenes colapsan en uno o se fusionan entre sรญ, y aquรญ dominarรก el mรกs grande.
La documentaciรณn de la W3C define el colapso de mรกrgenes de la siguiente manera:
"En CSS, los maฬrgenes adyacentes de dos o maฬs bloques (que podriฬan o no ser hermanos) pueden combinarse para formar un uฬnico margen. Cuando los maฬrgenes se combinan de esta manera decimos que colapsan, y el margen combinado resultante se denomina margen colapsado."
ยฟCuando colapsan los margenes?
Los mรกrgenes horizontales no colapsan nunca, solo los verticales, es decir, los mรกrgenes top y bottom, y colapsan siempre que dos mรกrgenes verticales cualesquiera son contiguos y se ยซtocanยป, cuando no hay nada mรกs entre ellos. Las situaciones de colapso se pueden clasificar en cuatro casos:
Hermanos adyacentes
Un contenedor y su primer elemento
Un contenedor y su รบltimo elemento
Bloques vacรญos
El colapso de mรกrgenes solo afecta al modelo de bloques, no afecta a otros modelos de display, por ejemplo al flex model (display: flex
).
Hermanos adyacentes
Este ejemplo visual es la mejor manera de entenderlo:
Cuando los desarrolladores hace algo asรญ, espera que el margen de la primera caja y la segunda sea de 80px (40px + 40px), pero en realidad es de 40px. Los dos mรกrgenes se tocan entre sรญ, por lo que se combinan o se colapsan el uno con el otro.
El margen inferior del elemento se colapsa con el margen superior del siguiente elemento. Ahora para empujar aรบn mรกs, vamos a dar a nuestra primera caja un margen inferior (margin-bottom) de 100px
Como podemos observan en la imagen el margen mรกs grande siempre gana, es decir, como la primera caja tiene un margen de 100px y la otra caja 40px el que termina ganando es el que tenga un valor superior, podemos decir que hay 100px de margen entre la primera y la segunda caja.
El mejor mรฉtodo o truco para solucionar esto, es utilizar siempre margin-bottom
para separar elementos olvidarte de margin-top
Un contenedor padre y su primer elemento
En este ejemplo vamos a tener un header
y dentro de el un encabezado <h1>
.
Como podemos observar en la imagen hay un espacio entre la parte superior del viewport y el header
, ese espacio extra no corresponde al body
ya que si te fijas en el cรณdigo CSS, el body
tiene un margen con valor de 0. ยฟAdivinas de dรณnde viene?
Ese margen tampoco es del header
lo que nos lleva a concluir que ese margen le corresponde al encabezado <h1>
, y si revisas la herramienta de desarrollo te puedes dar cuenta que el encabezado ya viene con un margen vertical de la hoja de estilo del navegador.
ยฟRecuerdas cuando mencionรฉ sobre las hojas de estilo del navegador?
La soluciรณn es colocar un margin: 0
al <h1>
y asรญ ya no se tiene esa separaciรณn. El resultado es el siguiente:
Ahora quiero agregar nuevamente un margin-top
de 10px al <h1>
Como puedes observar el header
se moviรณ, y se supone que solo le indicamos que se moviera el <h1>
. Para que esto no ocurra, tenemos varias soluciones:
Aรฑadir la declaraciรณn
overflow: hidden
alheader
.Aรฑadir un
padding-top
alheader
.Aรฑadir un
border-top
al header.
Si anฬadimos padding, border o espacio a los elementos de los ejemplos anteriores, no se aplicaraฬ el colapso. En otras palabras, una forma de deshacerse del comportamiento del colapso de maฬrgenes consiste en anฬadir alguฬn tipo de separacioฬn (borde, padding o espacio libre) entre los maฬrgenes.
Un contenedor padre y su รบltimo elemento.
De forma anรกloga a lo que ocurre en el caso anterior con los mรกrgenes superiores, los mรกrgenes inferiores del contenedor y de su รบltimo elemento tambiรฉn colapsan en uno solo. Y tambiรฉn como en el caso anterior, el colapso de mรกrgenes no se produce si el borde o el padding del contenedor es mayor a cero.
Como puedes observar al igual que pasa con el primeri hijo, aunque hayamos establecido un margin-bottom: 30px;
al padre y un margin-bottom: 50px;
al hijo estos, mรกargenes se colapsen y al final solo queda el del hijo, puesto que es el mas grande.
Bloques vacรญos
Los mรกrgenes verticales de un bloque vacรญo (sin height ni padding ni contenido) tambiรฉn colapsan entre sรญ. Por ejemplo, si tenemos un bloque vacรญo con un margen top de 40px y un margen bottom de 20px, el elemento ocuparรก una zona de 40px de altura al colapsar sus propios mรกrgenes verticales:
Bibliografia
Last updated