HTML y CSS: El "extraño" comportamiento de las cajas anidadas

Un concepto que todo programador Web debe tener claro es el modo de visualización CSS de los elementos. Es indispensable ya que condiciona por completo el comportamiento de los elementos HTML dentro de una página.

Otro comportamiento que es importante tener claro es todo lo que se refiere con el derrumbamiento de márgenes verticales de los elementos. Éste hace que los márgenes verticales no se sumen, sino que se combinen, aunque no en todas las circunstancias.

Un caso «extraño» se da cuando tenemos en una página elementos anidados, es decir, cuando uno o varios elementos están contenidos dentro de otros.

Por ejemplo, consideremos esta página tan sencilla con dos elementos de tipo <div>, uno dentro de otro:

<div id="Uno">
    <div id="Dos">
        Lorem ipsum...
    </div>
</div>

Y les aplicamos los siguientes estilos:

html, body{
    width: 100%;
    height: 100%;
    margin:0px;
    padding:0px;
}

#Uno{
    background-color: aqua;
}

#Dos{
    background-color: blue;
    padding: 20px;
    margin: 30px;
    height: 200px;
    width: 200px;
}

Fíjate en que el div exterior (‘Uno’) no incluye ningún tipo de dimensión ni otras propiedades. Es un elemento de bloque (display:block) porque es su comportamiento por defecto, pero nada más.

Este fragmento tan sencillo se visualiza de la siguiente manera:

CSS-Anidados-01

Es decir, si nos fijamos, la caja exterior ocupa todo el ancho disponible en la página extendiéndose hacia la derecha, se respeta el margen horizontal de 30px de la caja interior (por eso está desplazada hacia dentro, a la derecha) pero aparentemente no se respeta el margen vertical que se ha indicado (también de 30px). Además la caja exterior no está pegada al borde superior de la página a pesar de tener un margen y un relleno de 0 (son sus valores por defecto).

Es decir, en este caso se dan dos comportamientos extraños, en apariencia independientes, que son los que he marcado en negrita en el párrafo anterior que vamos a analizar a continuación.

SIGUE LEYENDO para aprender:

  • Cómo funciona el derrumbe de márgenes en elementos adyacentes
  • De qué manera diferente funciona cuando los elementos están anidados
  • Cómo podemos prevenir el derrumbe de márgenes
  • Cómo afecta la propiedad overflow sobre la visualización de márgenes
  • Qué es un contexto de formato de bloque
  • Cómo afectan otras propiedades sobre la visualización de márgenes

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *