Box model

Mario González - Blog sobre desarrollo web

Introducción al box model

| ,

A la hora de renderizar los elementos html, los navegadores siguen el llamado modelo de caja o box model. En este artículo explicaremos los fundamentos de este modelo y veremos los conceptos básicos que tendremos que aplicar a la hora de maquetar una web.

Los fundamentos

El box model es el modelo que siguen los navegadores para darle a una entidad html una posición y unas medidas dentro de la plantilla general. Según el box model, todos los elementos, sea cual sea su forma o tamaño, ocupan el espacio de un rectángulo. Este rectángulo tiene cuatro zonas: contenido, padding, border y margin. Las tres primeras son visibles, y la cuarta es invisible, pero ocupa espacio.

Contenido: es la zona donde se representarán, si los hay, los descendientes del elemento.

Padding: es una zona de espacio entre el borde y el contenido, y si hay un color de fondo, también se rellenará con él.

Border: es el límite de las partes visibles del elemento, y tiene su propio color.

Margin: es una zona invisible fuera del borde, y que sirve para separar al elemento del resto de elementos que vayan a ser renderizados.

Las medidas totales de un elemento, es decir, el espacio que va a ocupar, se corresponden con la siguiente suma:

espacio que ocupa un elemento = su contenido + su padding + su borde + su margen.

A diferencia del espacio que ocupa, las medidas visibles se corresponden con la siguiente suma:

medidas visibles de un elemento = su contenido + su padding + su borde.

Veamos un ejemplo: si tenemos un párrafo con width:100px y le añadimos padding:10px y border:1px solid #000, al final tendremos un rectángulo visible de 122px de ancho (100pxdel contenido + de width + 10px de padding izquierdo + 10px de padding derecho + 1px de borde izquierdo + 1px de borde derecho). Es importante tener en cuenta esta regla, sobre todo cuando hemos establecido las medidas en un principio y más adelante queremos añadir paddings o bordes. Si queremos que el elemento siga ocupando el mismo espacio, habrá que reducir sus medidas para que la suma total sea igual a las medidas anteriores.

Otro ejemplo:


div {
    width:150px;
}

Más tarde:


div.cabecera {
    padding-left:5px;
    border:2px solid #000;
    width:141px;   /* 141 + 5 + 2 + 2 = 150 */
}

Como vemos, si al añadir un padding izquierdo de 5px y un borde de 2px queremos que el elemento siga teniendo las mismas medidas iniciales (150px), hay que ajustar su ancho para que la suma del ancho + el padding izquierdo + los dos bordes laterales den un total de 150px.

Sintaxis

Las propiedades CSS para establecer las medidas de los márgenes y los paddings son:

margin-top, margin-bottom, margin-left, margin-right
padding-top, padding-bottom, padding-left, padding-right

Sin embargo, podemos utilizar las propiedades globales para establecer varias medidas en una sola declaración:


margin:10px 5px 10px 5px;
padding:10px 5px 10px 5px;

Los cuatro valores se corresponden con los cuatro lados, empezando por arriba y siguiendo la dirección de las agujas del reloj:


margin: top right bottom left;

Cuando dos lados opuestos tienen la misma medida, podemos unirlos en una sola cantidad:


margin:10px 5px 10px 5px;  /* ==> margin:10px 5px; */
padding:10px 5px 8px 5px;  /* ==> padding:10px 5px 8px; */

Cuidado, si los lados iguales son el top y el bottom, no podemos unirlos:


margin:30px 15px 30px 10px;  /* NO ==> margin:30px 15px 10px; (esto equivaldría a left y right iguales) */

Por último, si los cuatro lados son iguales, se puede poner un único valor:


padding:20px 20px 20px 20px;   /* ==> padding:20px; */

El margin puede tener valores negativos, pero el padding y el border no.

Para establecer el borde, tenemos varias propiedades:


border-width:1px;  /* para el ancho del borde */
border-style:solid;  /* para el estilo de línea (solid es una línea continua) */
border-color:#f00;  /* para el color del borde */

Las tres se pueden sintetizar en la propiedad border:


border:1px solid #f00;

Del mismo modo que con margin y padding, podemos establecer diferentes bordes para cada uno de los cuatro lados:


border-left:1px solid #f00;
border-top:1px solid #00f;
border-right:2px dashed #000;
border-bottom:2px dotted #fff;

Y sus propiedades individuales:


border-left-width:1px;
border-bottom-style:dashed;
border-top-color:#0f0;

Por último, podemos establecer una propiedad individual en varios lados a la vez, igual que hacíamos con margin y padding:


border-width:1px 2px 1px 10px;

Cambiando el modelo

Una vez que nos acostumbramos al modelo, no deberíamos tener demasiados problemas. Pero si en algún momento necesitamos que el width de un elemento se corresponda exactamente con sus medidas visuales, podemos forzar un cambio de modelo mediante la propiedad box-sizing de CSS3, a través de su valor border-box.

En el momento de escribir este artículo, no todos los navegadores modernos dan soporte a la versión estándar de esta propiedad, así que tenemos que usar prefijos:


    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;

Estas declaraciones harán que las medidas de un elemento se correspondan con su width y su height. Volviendo a nuestro ejemplo inicial:


div {
    width:150px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

Más tarde:


div.cabecera {
    padding-left:5px;
    border:2px solid #000;
}

Como vemos, no habría que añadirle un nuevo width porque su ancho seguirá siendo de 150px aun habiendo cambiado el borde y el padding.

Conclusiones

A pesar de poder cambiar el modelo, recomendamos conocer bien el box model y usarlo salvo excepciones, ya que por ahora es el modo nativo de representar los elementos. Con un poco de práctica, los ajustes de medidas cuando hay paddings o bordes no nos supondrán ningún problema.

Para ampliar información:
El modelo de caja
en Cristalab.

¿Qué opinas?

Tu dirección de correo electrónico no será publicada. * Campos obligatorios