Modelo de caja CSS

El modelo de caja es una de las bases más importantes en CSS, ya que es el modelo en el cual se centra el diseño web.
Consiste en representar cada elemento como una caja rectangular que obtiene su cuerpo mediante algunas propiedades específicas, veamos la siguiente figura para ver esas propiedades.

Las propiedades del modelo de caja

A continuación mencionaremos las propiedades básicas que le dan forma a la caja rectangular que vimos anteriormente
width y height este par de propiedades establece el ancho y el alto de la caja respectivamente en donde será mostrado el contenido.
padding actúa como el margen contenido al interior de la caja entre el contenido y el borde.
margin al contrario de padding el margin se presenta como el espacio exterior de la caja, es decir, el espacio existente entre el borde de la caja y el borde de los elementos que pudieran aparecer en cualquiera de los cuatro lados de esta.
border el border es el espacio que rodea él limite de la caja, inicialmente presente con un ancho de cero e invisible, propiedades que desde luego pueden modificarse.

Llegado a este punto es importante mencionar que las propiedades que mensionamos anteriormente (margin, padding width y height), se suman para dar el ancho y el alto real que tendrá la caja; Por ejemplo para un elemento con ancho y alto de 10 pixeles, un borde de 0 y un margin y un padding de 5 pixeles, su ancho total será de 30 pixeles al igual que su alto.

Propiedad box-sizing

Para modificar lo que acabamos de mencionar sobre el ancho y alto real que tomara un elemento al añadir margin y padding, existe la propiedad box-sizing la cual modifica las propiedades del modelo de caja y con su valor content-box por defecto modifica ancho y alto añadiendo los valores de margin y padding.
border-box mediante este valor el tamaño de la caja establecido se mantiene, es decir que el tamaño del padding y del border no serán sumados al tamaño total del elemento lo cual no hará crecer la caja más allá del tamaño especificado excluyendo el margin que ya no se añadirá al tamaño total de la caja.
Ojo:Esto permite mantener el tamaño de la caja pero deja menos espacio para el contenido de la misma veamos el siguiente ejemplo.

Tenemos un pequeño div con las siguientes propiedades HTML y CSS (vea que en el CSS cuenta con la propiedad box-sizing con el valor border-box).

El html...

<div>
 A
</div>

Y el CSS...

 div{
 width:30px;
 height:30px;
 border:5px solid #ccc;
 box-sizing:border-box; 
 padding: 5px;
 margin:10px;
 background-color:#cda;
 }

Con un resultado.

Y sí ahora a nuestro div le dejamos en la propiedad box-sizing el valor content-box que tráe por defecto, respetando el resto de las propiedades.

div{
 width:30px;
 height:30px;
 border:5px solid #ccc;
 box-sizing:content-box;
 padding: 5px;
 margin:10px;
 background-color:#cda; 
}

Y el resultado...

Vemos que el tamaño del elemento crece solamente con cambiar el valor de la propiedad box-sizing, debido a la suma del valor de las propiedades antes mencionadas.

Disposición de las cajas

La disposición de las cajas en CSS se controla mediante la propiedad display, controla la forma en la que se presentará una caja con respecto a otras. En la actualidad existen una gran cantidad de valores para esta propiedad, pero aquí veremos los más básicos.
Cada elemento HTML tiene un valor display por defecto, pero como dijimos vamos a ver los básicos que son el valor block y el valor inline que es de donde parten el resto de valores. El valor block de la propiedad display dota al elemento de adoptar todo el ancho disponible aunque su contenido sea pequeño.
En cambio el valor inline únicamente toma el espacio que necesita su contenido, permitiendo una disposición más fluida.

Como mencionamos, cada elemento tiene un valor display por defecto, por ejemplo los elementos de párrafo, artículos, contenedores div etc. tienen una disposición block por defecto y los elementos con una disposición inline son los elementos span, a, b etc.
Veamos en el siguiente ejemplo esto, notemos como se comportan tres etiquetas span y tres elementos p.