En este tutorial aprenderemos sobre el modelo de caja, las propiedades que maneja (width, height, border, margin, padding, box-sizing) y cómo afectan su comportamiento.

En nuestro camino por entender los secretos de la web, hoy revisaremos los conceptos de Box Model.

Cada elemento que encontramos dentro de un documento HTML se encuentra contenido en una caja rectangular, la cual cuenta con una serie de propiedades que afectaran el cómo se muestran los elementos.

Al trabajar con un modelo de caja, debemos tener en cuenta que existen dos propiedades principales para definirla, height y width, que definirán el ancho y alto de nuestra caja.

Adicionalmente a estas, tenemos el Margin, Padding y Border que nos brindaran mayor control al momento de organizar los elementos.

Si comparamos ambas imágenes, podremos observar que existe una pequeña variación de tamaño entre una y otra, esto es debido a que el padding y el border están agregando 10 píxeles respectivamente a cada lado de nuestra caja, haciendo que el tamaño de esta se incremente en 40 del tamaño original, siendo ahora de 240px width y 140 px en height.

También podemos observar que ahora nuestra caja se está separando del borde de la pantalla, esto pasa gracias al marginquien está agregando 10 pixeles por lado, para poder entender mejor veamos la siguiente imagen.

Entonces para saber el ancho real de nuestra caja debemos sumar lo siguiente.

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

De igual manera con el alto de la caja.

margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

Lo que finalmente nos quedaría es:

Width: 260px = 10px + 10px + 10px + 200px + 10px + 10px + 10px

Height: 160px = 10px + 10px + 10px + 100px + 10px + 10px + 10px

El modelo de caja puede llegar a ser un poco confuso, ya que inicialmente definimos un alto y ancho específico para nuestra caja, pero gracias al padding, border y margin este tamaño varía. Esto ocurre porque el modelo de caja por defecto es aditivo; por lo tanto, para determinar el tamaño real, deberemos calcularlo según se muestra en el ejemplo anterior.

Algo que es importante mencionar es que el navegador por defecto agrega un margin y padding a los elementos para mejorar su claridad y legibilidad. Estos valores por defecto variarán dependiendo del navegador que estemos utilizando; además, nos es posible borrar o resetear estos estilos por defecto (http://meyerweb.com/eric/tools/css/reset/) para evitarnos problemas y tener más control al momento de organizar mejor nuestros elementos.

El margin y el padding son completamente transparentes y no se le puede aplicar valores de color.

Las propiedades margin y padding pueden aceptar de uno a cuatro valores, como se muestra a continuación.

Si declaramos un solo valor para Margin y Padding, este se establecerá ese valor para cada lado de la caja.

Si declaramos 2 valores para Margin y Padding, se establecerá el primero para Top y Bottom y el segundo para Left y Right

Con 3 valores estableceremos el Top, Right y Bottom de nuestro Padding y Margin, al no establecer el valor de Left este tomara el mismo que el de Right.

Finalmente estableciendo 4 valores le asignamos un tamaño a cada lado del margin y padding.

Es importante mencionar que la asignación de valores va en sentido horario comenzando por el Topy finalizando en el Left

Entre el Margin y el Padding encontramos al Border el cual requiere de 3 valores (width, style y color) para poder ser visualizado correctamente.

Si queremos probar otros estilos para nuestro border además del solid, aquí les dejo un enlace que les será de ayuda (http://www.w3schools.com/css/css_border.asp).

Si queremos establecer valores más específicos a los lados del border, cambiar el estilo o color solo debemos escribir:

border-(top, bottom, left o right)-(width, style o color)

border-top-style o border-left-width

Cuando deseamos hacer que un borde sea redondeado utilizamos border-radius. Esta propiedad modifica la forma en la que se muestran las esquinas de nuestra caja, border-radius acepta valores en pixeles y en porcentajes, además podemos establecer valores para cada borde por separado, muy parecido a lo que vimos anteriormente.

Finalmente veremos el Box-Sizing propiedad que es usada para modificar las propiedades del Box Model visto anteriormente, brindándonos aún más control sobre nuestra caja.

box-sizing acepta principalmente 3 valores: content-box, padding-box y border-box, cada uno de estos modifica el cómo se calcula el tamaño de nuestra caja

Box-sizing: content-box

Box-sizing: padding-box

Box-sizing: border-box

Content-Box

Es el valor por defecto que tiene el Box Model, su características es que es aditivo, es decir, si agregamos un tamaño al margin, padding y border estos se sumaran al width y height establecidos, agrandando el tamaño real de nuestra caja.

Este sería el tamaño de nuestra caja (sin considerar el margin):

Width: 110px

Height: 110px

Paddding-box

Incluye el tamaño del padding dentro del tamaño establecido para la caja, es decir que el padding no sumara pixeles al tamaño de la caja, sino que el tamaño de la caja se reducirá para que al agregarle el padding la caja mantenga el tamaño establecido inicialmente, dejando fuera a border y margin.

Veamos con el mismo ejemplo anterior.

Border-box

Al igual que el anterior disminuirá su tamaño agregando al padding y border para que el tamaño establecido de la caja se mantenga, dejando fuera al margin.

Al igual que en el ejemplo anterior el tamaño de nuestra caja disminuye para agregar al padding y border, manteniendo así el tamaño inicial de la caja.

Podemos comprobar esto sumando el tamaño de la caja con el padding y border:

Width: 10+20+40+20+10 = 100px

Height: 10+20+40+20+10 = 100px

Hasta aquí finaliza el tema de hoy. Espero les haya sido de utilidad. No olviden compartir con sus amigos y dejarnos sus dudas y opiniones en la caja de comentarios. ¡Hasta la próxima!