MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

El modelo de cajas es la base del diseño web — cada elemento se representa como una caja rectangular, con su contenido, padding (espacio interior), borde y margen construidos uno sobre otro como las capas de una cebolla. El navegador, para interpretar el diseño de una página, procesa los estilos que se aplicarán a cada caja, el tamaño de las capas de la cebolla y la ubicación de unas cajas con respecto a otras. Antes de comprender cómo crear diseños CSS, debemos entender el modelo de cajas — que es lo que veremos en este artículo.

Prerrequisitos: Conocimientos básicos de ordenadores, SW básico instalado, conocimiento básico de manejo de ficheros, y HTML básico (ver Introducción a HTML). Y una idea del funcionamiento de CSS (ver artículos previos en este módulo.
Objetivo: Aprender el funcionamiento del modelo de cajas en CSS y la forma de ubicar los elementos en una página.

Propiedades de las cajas

Cualquier elemento contenido en un documento tiene la estructura de una caja rectangular dentro del formato del documento, el tamaño y las capas que serán retocadas usando las propiedades CSS. Las propiedades importantes son:

width y height

Las propiedades width y height establecen el ancho y alto de la caja de contenido, que es el área donde se muestra el contenido de la caja — este contenido comprende tanto el texto incluido en la caja como otras cajas representadas por elementos anidados.

Nota: Hay otras propiedades que permiten el manejo refinado del tamaño de la caja de contenido — para limitar los tamaños. Para ello se usan las propiedades min-width, max-width, min-height, y max-height.

padding

Padding hace referencia al margen interior de la caja CSS — entre el límite exterior de la caja del contenido y el límite interior del borde. El tamaño de esta capa puede configurarse en sus cuatro lados a la vez con la propiedad abreviada padding, o cada lado por separado con las propiedades: padding-top, padding-right, padding-bottom y padding-left.

border
El borde de una caja CSS descansa entre el límite exterior del padding y el límite interior del margen. Por defecto tiene un tamaño de 0 — invisible — pero podemos cambiar su grosor, estilo y color para hacerlo visible. La propiedad abreviada de border permite establecer los cuatro lados a la vez, por ejemplo: border: 1px solid black. Pero también se puede dividir en varias propiedades extendidas para su uso en necesidades concretas de estilo:
margin

El margen envuelve la caja CSS, y sostiene a otras cajas del diseño. Se comporta como padding; la propiedad abreviada es margin y las propiedades individuales son margin-top, margin-right, margin-bottom, y margin-left.

Nota: Los márgenes tienen un comportamiento peculiar llamado margin collapsing: Cuando dos cajas se toca, la distancia entre ellas es el valor del margen más grande, y no la suma de ambos.

Aprendizaje activo: trabajando con cajas

Para ilustrar algunas particularidades del modelo de cajas anterior, es momento de realizar algunos ejercicios que nos ayuden a comprender algunas particularidades. Podemos probar a realizar los ejercicios en el editor a contitinuación, pero para observar algunos de los efectos es mejor crear los HTML y CSS a nivel local y probarlos en ventanas de navegación aparte. Tenemos el código del ejemplo en Github.

Si te equivocas puedes comenzar de nuevo pulsando el botón Reset. Si te atrancas, pulsa el botón Show solution para ver una respuesta válida.

En el ejemplo editable siguiente, encontramos un conjunto de tres cajas, que contienen texto y han sido formateadas para ocupar la totalidad del ancho del cuerpo. Se representan por los elementos <header>, <main>, y <footer> en el código. Queremos que te concentres en las primeras tres reglas — que seleccionan cada caja — y pruebes lo siguiente:

  • Echa un vistazo al modelo de cajas de cada elemento de la página abriendo la herramienta para desarrolladores del navegador haciendo click en los elementos en el inspector DOM. Ver Descubrir las herramientas de desarrollador del navegador para saber cómo hacerlo. Cada navegador tiene un visualizador de modelo de cajas que muestra con precisión el margen, borde y relleno que se aplicará a cada caja, el tamaño de la caja del contenido y el espacio total que ocupará el elemento.
  • Establece margin-bottom en el elemento <main>, pon 20px. Ahora establece margin-top en el elemento <footer>, pon 15px. Observa que la segunda acción no provoca ninguna diferencia al diseño — esto implica el choque de márgenes en acción; el ancho efectivo de margen más pequeño se ha reducido a 0, dejando solo el margen más grande.
  • Pon un margin de 30px y un padding de 30px en cada lado del elemento <main> — observa como el espacio alrededor del elemento (el margen) y el espacio entre el borde y el contenido (el relleno) han aumentado, provocando que el contenido ocupe un poco más de espacio. De nuevo, compruébalo con la herramientas de desarrollador del navegador.
  • Establece un borde mayor, de 40px, en todos los lados del elemento <main>, y observa cómo se suprime espacio del contenido en lugar de del margen o del relleno. Puedes hacer esto estableciendo un conjunto nuevo de valores para el ancho, estilo y color con la propiedad border, por ej. 60px dashed red, pero como las propiedades se han establecido en una regla anterior, puedes simplemente establecer un nuevo border-width.
  • Por defecto, el contenido width se establece al 100% del espacio disponible (después de que margin, border, and padding hayan tomado su parte) — si cambiamos el ancho de la ventana del navegador, las cajas crecerán y reducirán para permanecer contenidas dentro de la ventana del ejemplo. La altura height del contenido se adaptará por defecto a la altura del contenido de dentro de ella.
  • Prueba poner un nuevo ancho y alto al elemento <main> — comienzo por 400px de ancho y 200px de alto — y observa el efecto. Advertirás que el ancho ya no cambia al cambiar el tamaño de la ventana.
  • Prueba a poner un porcentaje de ancho en el elemento <main> — p.ej. 60% width — y observa el efecto. Deberías ver cómo ahora el ancho cambia de nuevo cuando cambia la ventana del navegador. Elimina el valor de height del elemento <main> por ahora.
  • Prueba a poner el padding y el margen del elemento <main> al 5% en todos los lados y observa el resultado. Usando las herramientas de desarrollador del navegador y compáralo al ancho del margen/padding, verás que el 5% significa "el 5% de ancho del contenido del elemento". Así, el margen/padding crece a la vez que lo hace la ventana del ejemplo.
  • Los márgenes pueden admitir valores negativos, que se pueden usar para provocar solapamientos. Prueba estableciendo margin-top: -50px; en el elemento <main> para ver el efecto.
  • ¡Continua experimentando!

Algunas pistas e ideas:

  • Por defecto background-color/background-image se extiende hasta el límite del borde. Este comportamiento se puede cambiar usando la propiedad background-clip, para saber más consultar la sección Background_clip.
  • Si la caja del contenido se hace más larga que la ventana del ejemplo, se saldría de la ventana apareciendo las barras de desplazamiento para ver el resto de la caja. El desbordamiento se puede controlar mediante la propiedad overflow — ver la seción posterior Overflow.
  • Las alturas de las cajas no respetan las medidas porcentuales; la altura de la caja siempre se acopla a la altura de la caja del contenido, a menos que se establezca una altura en valor absoluto (en pixels o ems). Esto es más beneficioso que establecer todas las cajas por defecto al 100% de la altura de la ventana.
  • Los bordes también ignoran el uso de porcentajes para el ancho.
  • Ya nos deberíamos haber dado cuenta de que el ancho total de una caja se corresponde con la suma de sus propiedades width, padding-right, padding-left, border-right, y border-left. En algunos casos esto es molesto (supongamos que queremos una caja con un ancho total del 50% y el borde y el padding están expresados en pixels). Para evitar estos inconvenientes, podemos modificar el modelo de cajas con la propiedad box-sizing. Con el valor border-box, se cambia el modelo de cajas por este otro:

Manipulación de cajas avanzada

Además de establecer el alto, ancho, borde, padding y margen de las cajas, hay otras propiedades disponibles para modificar el comportamiento de estas. Esta sección tratará estas otras propiedades.

Desbordamiento

Al establecer el ancho de una caja con valores absolutos (p.ej. ancho/alto en pixels), el contenido puede no encajar con el tamaño permitido, en cuyo caso el contenido desborda la caja. Para controlar lo que ocurre en estos casos, podemos usar la propiedad overflow. Puede tomar varios valores, pero los más usuales son:

  • auto: Si hay demasiado contenido, el desbordamiento del contenido es ocultado apareciendo las barras de desplazamiento para permitir al usuario desplazarse para ver todo el contenido
  • hidden: Si hay demasiado contenido, el desbordamiento es escondido.
  • visible: Si hay demasiado contendido, el desbordamiento se muestra fuera de la caja (este es normalmente el comportamiento por defecto).

Veamos un sencillo ejemplo para comprobar el funcionamiento:

Primero, el HTML:

<p class="autoscroll">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
</p>

<p class="clipped">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
</p>

<p class="default">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
</p>

Y el CSS:

p {
  width  : 400px;
  height : 2.5em;
  padding: 1em 1em 1em 1em;
  border : 1px solid black;
}

.autoscroll { overflow: auto;    }
.clipped    { overflow: hidden;  }
.default    { overflow: visible; }

El código anterior produce el siguiente resultado:

Límite del fondo

Los fondos de las cajas están hechos de colores e imágenes, apiladas unas sobre otras (background-color, background-image.) Se aplican al fondo de la misma. Por defecto los fondos se extienden hasta el límite exterior del borde. Suele ser suficiente, pero en ocasiones puede molestar (¿Qué pasa si tenemos una imagen de fondo que queremos que solo llegue hasta el límite del contenido?) Este comportamiento puede ajustarse mediante la propiedad background-clip de la caja.

Veamos el funcionamiento con un ejemplo. Primero el HTML:

<div class="default"></div>
<div class="padding-box"></div>
<div class="content-box"></div>

Ahora el CSS:

div {
  width  : 60px;
  height : 60px;
  border : 20px solid rgba(0, 0, 0, 0.5);
  padding: 20px;
  margin : 20px 0;

  background-size    : 140px;
  background-position: center;
  background-image   : url('https://mdn.mozillademos.org/files/11947/ff-logo.png');
  background-color   : gold;
}

.default     { background-clip: border-box;  }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }

El código anterior produce el siguiente resultado:

Contorno

Por último, el outline (contorno) de una caja es algo que se parece al borde pero que no forma parte de la caja. Se comporta como el borde pero se dibuja por encima de caja sin cambiar su tamaño (concretando, el contorno se dibuja por fuera de la caja del borde, dentro del área del margen).

Nota: Cuidado al usar la propiedad outline. Se usa en ocasiones por razones de accesibilidad, para remarcar la parte activa de una página web como los links cuando son pulsados. Si usamos los contornos debemos asegurarnos de que su formato no se parezca a los links para no confundir a los usuarios.

Tipos de cajas CSS

Todo lo dicho hasta ahora se refiere a las cajas que representan elementos de bloque. No obstante, CSS tiene otros tipos de cajas que se comportan diferente. El tipo de caja aplicada a un elemento se controla por la propiedad display. Hay muchos valores diferentes para display, pero ahora nos centraremos en los tres más comunes: block, inline, y inline-block.

  • Una caja block se caracteriza por ser una caja apilada sobre otras cajas (p.ej. el contenido anterior y posterior a la caja aparece en líneas separadas), y puede tener asignada un ancho y un alto. Todo el modelo de cajas descrito anteriormente se refiere a las cajas bloque.
  • Una caja inline (de línea) es lo contrario de la caja bloque: Se aplica a los documentos de texto (p.ej. aparecerá en la misma línea rodeando al texto y a otros elementos en la línea, y su contenido avanzará con el texto, como la separación entre las líneas de un párrafo). El ancho y alto definidos no afectan a este tipo de cajas inline; cualquier padding, margen y borde aplicado a las cajas inline modificará la ubicación del texto alrededor, pero no la posición de las cajas (de bloque) circundantes.
  • Una caja inline-block es algo intermedio entre las dos primeras: fluye con el texto sin crear líneas de ruptura delante y detrás como las cajas inline, pero puede limitarse estableciendo alto y ancho manteniendo así la integridad de bloque como las cajas block — no se partirá entre las líneas del párrafo (en el anterior ejemplo la caja inline va encima de la 2da línea de texto, al no haber suficiente espacio para ella en la primera línea, y esta no parte las dos líneas).

Nota: Por defecto, los elementos de bloque tiene definido display: block; y los elementos de línea: display: inline.

Esto puede sonar un poco confuso por el momento; Veamos un sencillo ejemplo:.

El HTML:

<p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <span class="inline">Mauris tempus turpis id ante mollis dignissim.</span>
   Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="inline-block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

El CSS:

p {
  padding : 1em;
  border  : 1px solid black;
}

span {
  padding : 0.5em;
  border  : 1px solid green;

  /* That makes the box visible, regardless of its type */
  background-color: yellow;
}

.inline       { display: inline;       }
.block        { display: block;        }
.inline-block { display: inline-block; }

El código anterior produce el siguiente resultado, que ilustra el efecto de los tipos de caja anteriores:

Lo siguiente

En este punto, hemos adquiridor familiaridad con las cajas CSS y su funcionamiento. No te preocupes si ahora mismo no lo entiendes al 100% — puedes volver y releer este artículo para resolver dudas, además comenzarás a comprenderlo mejor cuando comiences a trabajar con ejemplos prácticos más adelante en el curso. Lo siguiente será Depurando CSS.

Ver también

Etiquetas y colaboradores del documento

 Colaboradores en esta página: javierpolit
 Última actualización por: javierpolit,