CSS Básico: El modelo de caja

Parte esencial de CSS, es el modelo de caja, en este tutorial vamos a ver que es, como funciona el modelo de caja y que cosas podemos hacer con el.

¿Qué es el modelo de caja?

Antes de CSS, se usaban las tablas para estructurar un sitio web, ahora tenemos el modelo de caja que es un conjunto de propiedades que definen como se muestran y se alinean los elementos HTML (cajas/rectángulos) y como interactúan con su entorno en una pagina web.

Este conjunto de propiedades predeterminadas son los siguientes:

• Border: Define el borde del elemento, por defecto es 0, osea sin borde.
• Background: El fondo del elemento, sus variaciones son un color solido o transparente (background-color), una imagen (background-image) o hasta un complejo gradiente con CSS3.
• Padding: Es un espacio que hay entre la caja y el contenido, se podría decir que es un margen interno.
• Width/Height:El width es la longitud del contenido, no de la caja en si, la longitud real de la caja es la longitud del contenido + el padding y el border, y el height es el alto de la caja.
• Margin: Es el espacio que hay entre la caja y lo que esta afuera, un margen externo.

¿Cómo funciona el modelo de caja?

Es bastante simple, usamos los selectores para estilizar un elemento HTML, y le vamos poniendo las propiedades listadas arriba para definir el modelo de caja.
El elemento mas usado para utilizar todas las propiedades de caja es div.

Ejemplo

Vamos a hacer un div con un ancho y un alto definidos y que dentro del div va a ir un texto de ejemplo para poder notar todas las propiedades del modelo de caja:

<style>
div {
background-color:#C2C2C2;
border:20px solid #E1E1E1;
height:200px;
margin:10px;
padding:20px;
width:200px;
}
</style>

<div>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo.
</div>

Podemos notar que la caja se separa del exterior por un margin de 10px a todos los lados, ademas de tener un borde de 20px de grosor, un fondo y que entre el borde de la caja y el contenido hay un espacio que es el padding de 20px a todos los lados.

Margin y Padding

Notemos que en el estilo del ejemplo cuando se llama a las propiedades margin y padding se pone como valor un solo digito al hacer esto estamos definiendo que queremos esa cantidad en todos los lados, pero llega talvez el momento en que queremos que solo exista 10px hacia la derecha o izquierda o hacia arriba y hacia abajo, es entonces que se puede definir individualmente cada lado con la siguiente sintaxis:

/* Para margin y para padding es igual solo cambiar margin por padding */
margin-top:10px;
margin-right:10px;
margin-left:10px;
margin-bottom:10px;

Eso solucionaría el problema, pero existe un truco en CSS que hace las cosas mas cortas aun: el uso de shorcodes:

margin: top right left bottom;

/* Podemos decir que: */

margin: 10px 20px 30px 40px;

/* y tendriamos un margin de 10px hacia arriba, 20 a la derecha 30 a la izquierda y 40 hacia abajo */

Border

La sintaxis de border, es bastante diferente:

border: grosor estilo color;

Y si queremos bordes diferentes en cada lado, usaríamos las siguientes propiedades:

border-Xlado-color:;
border-Xlado-style:;
border-Xlado-width:;

/* O en shorcode: */

border-color: top right bottom left;
border-style: top right bottom left;
border-width: top right bottom left;

Cambiando Xlado por el lado a estilizar (top, right, bottom, left).