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 “contenido” 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 “¿No 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 “contenido” 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.

 

Artículos relacionados

IDE vs Editor de texto Una de las grandes preguntas que todo desarrollador se hace al iniciar su vida profesional es, ¿qué es mejor un IDE o un editor de texto?, o simplemen...
Introducción a WebWorkers   Los WebWorkers son una de las nuevas características de JavaScript que permite crear aplicaciones multiprocesos. Desde su inicio JavaScript ...
Introducción a los WebSocket Los WebSocket fueron introducidos recientemente con la llegada de HTML5 y es sin duda una de las mejoras más esperadas. Los WebSockets nos permite t...

Oscar Blancarte

Ideológico, Innovador y emprendedor, Padre, Tecnólogo y Autor, amante de la ciencia y la tecnología en todos sus colores y sabores. Arquitecto de software & Full Stack Developer con experiencia en la industria del desarrollo de software y la consultoría. Amante de la programación y el Ajedrez.

Deja un comentario

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