Introducci贸n al Box Model de CSS

Introducci贸n al Box Model de CSSEl Box Model es uno de los principales problemas que se presenta un programador de Front-End cuando inicia su carrera, es aprender la forma en el que navegador organiza los elementos dentro de la pantalla. Pues en muchas ocasiones confunde el rol que juega HTML y CSS para representar la informaci贸n.

Lo primero que debemos de entender, es que cada elemento que definimos en un documento HTML se mostrar谩 en el navegador como una caja, dicha caja tendr谩 4 lados y se compondr谩 de 4 a 5 secciones seg煤n el tipo de elemento.

La 煤nica secci贸n opcional es outline, la cual solo se utiliza para elementos de los formularios, as铆 que, por lo pronto, nos centraremos en los otros 4 y m谩s adelante retomaremos este 煤ltimo.

 

Box Model

 

Contenido:

 

La secci贸n del contenido la principal, pues contiene el 鈥contenido鈥 central a mostrar, es decir, un texto, una imagen, un video, etc. El contenido siempre es lo que queremos mostrarle al usuario y el resto de secciones solo sirven para decorarlo.

Esta secci贸n se ajusta a la altura y ancho del 鈥渃ontenido鈥 a mostrar, porque entre mayor sean los elementos mostrados, m谩s grande ser谩 esta 谩rea. Esta secci贸n en muchas ocasiones tiene un color o imagen de fondo para hacerla m谩s atractiva.

Box Model Contenido

Como podemos observar en la imagen, el contenido es la secci贸n central de todo el elemento, de tal forma, que el siguiente elemento que lo rodea es el padding. El tama帽o de esta secci贸n se puede modificar con las propiedades height聽, width聽, max-height聽, max-width聽, min-height聽, min-width聽.

 

Veamos el siguiente ejemplo:

Box Model Contenido

 

En la imagen podemos apreciar marcado en rojo, una etiqueta <p>, esta etiqueta tiene como contenido el texto 鈥溌縉o eres Oscar? Cambia de usuario鈥, la etiqueta <p> rodea todo el texto, incluso, es m谩s grande que el contenido, pues este lo rodea.

 

聽Padding

 

El paddin es una separaci贸n que existe entre el contenido y el borde, el cual se utiliza para dar una apariencia est茅tica m谩s atractiva y que el contenido no este pegado al borde.

Box Model padding

Cabe mencionar que el padding sigue siendo parte de la caja visible, por lo que, si tenemos una imagen o color de fondo, este se extender谩 a trav茅s del padding o relleno. El paddin est谩 delimitado por el borde.

Box Model padding

 

En esta nueva imagen, podemos ver el mismo ejemplo, solo que esta vez nos hemos centrado en el <div>聽 que contiene todo el contenido del formulario. Observemos que todos los componentes que tenemos en la pantalla est谩n alineados a la caja punteada interna, esto es porque esto es 鈥渃ontenido鈥 y la separaci贸n que existe entre las dos cajas punteadas es conocido como padding o relleno. Observemos que el color de fondo (gris claro) se expande a trav茅s del contenido y el padding.

El padding puede ser establecido con las propiedades padding聽 o ( padding-top聽, padding-bottom聽, padding-left聽, padding-right聽).

 

 

Border

 

El borde es una l铆nea que podemos dibujar al final de la caja, esta se utiliza para darle una apariencia est铆tica a la caja, pues nos permite dibujar una l铆nea de alg煤n color, la l铆nea puede tener los siguientes estilos:

El border es la 煤ltima parte visible de la caja y un que outline si es visible, este se pinta fuera de la caja. 聽El border puede ser establecido con las propiedades, border聽, border-top聽, border-bottom聽, borer-left聽, border-right

Box Model border

La siguiente imagen muestra un ejemplo del border:

Box Model border

 

En la imagen podemos apreciar un borde muy suave, incluso apenas perceptible, pero que sin duda le da una terminaci贸n m谩s elegante, adicional, estamos utilizando la propiedad border-raduis聽 para darle un efecto redondeado en las esquinas.

 

Margin

 

El margen es la 煤ltima secci贸n de Box Model y se puede ver como una separaci贸n invisible que ayuda a separar un elemento de otro. 聽Cuando definimos un color o imagen de fondo, este no se propaga a esta secci贸n.

Box Model margin

El margin se puede definir con las propiedades margin聽, margin-top聽, margin-bottom聽, margin-right聽, margin-left.

La siguiente imagen muestra mejor como es que utilizamos el margin:

Box Model margin

 

En este caso, utilizamos un margin inferior ( margin-bottom聽) para darle separar el primero campo del segundo, esta separaci贸n hace que las dos cajas no choquen y se vean m谩s est茅ticas.

 

Outline

 

El outline es una decoraci贸n gr谩fica que hace que los elementos que ganan el foco, que son por lo general los <input>聽, se coloren como con una ligera aura que los rodea:

Box Model outline

El outline se establece mediante la propiedad outline y es posible establecerle el grueso del outline, el color y el estilo.

 

Conclusiones

 

En la teor铆a todo esto puede resultar muy simple, pero la realidad es que muchos programadores front-end con experiencia siguen batallando con estos conceptos tan simples. Conocer y entender la teor铆a del Box Model es esencial para convertirte en un programador Front-end exitoso.

 

Deja un comentario

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *