¿Que es el Box Model?🤔
Tags: css, spanish, latam
Published: 2021-06-07 01:44:40

¡Hola gente bonita!👋

El nombre 'box-model' (modelo de caja) se llama así porque, en los navegadores, todo se construye a partir de cajas.

Entonces, lo primero que debemos de entender, es que cada elemento que definimos en un documento HTML se mostrará en el navegador como una caja rectangular esta es la forma en que se representan todos los elementos, no existen elementos triangulares, redondos, poligonales etc. Todos los elementos en HTML por defecto son rectangulares ya que internamente el navegador dibuja un rectángulo. 

⚠️ **Las únicas excepciones son las listas y las tablas, que generan más de una caja, y los elementos con `display: none` o `display: contents`, que no crean ninguna caja.**

Aunque usted visualice en un sitio web algún elemento diseñado en CSS que utiliza `border-radius` para parecer un círculo, ese elemento seguirá siendo rectangular:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z2el3y203tpq4688c50j.jpg)

Esto es porque como he dicho anteriormente, el navegador renderiza cada elemento de la página web como un elemento rectangular y con CSS nosotros definimos las propiedades como el tamaño, el color, los estilos, el margen y mucho más de estos elementos rectangulares.

Esto puedes comprobarlo con ayuda de la propiedad `outline`, podemos ver todos los elementos de la pagina de inicio de Google de forma rectangular y esto lo puedes hacer con cualquier otra página web.

```
* {
    outline: 1px solid red;
}
```
![Página de inicio de Google.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hyykfbzrr25abrxbmmio.png)

El navegador Microsoft Edge tiene una herramienta llamada 3D view que muestra todas las cajas contenedoras de forma visual en 3D:

![3D view Microsoft Edge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yr3aqheuwodxix5qq32f.png)

Cada elemento HTML en una página web es una caja, pero hay dos tipos básicos de cajas:

* *Block boxes.*
* *Inline boxes.*

Estos dos tipos de cajas, existieron desde el principio de la web:

###📦 Cajas de bloque (Block boxes)
Las cajas de bloque, por defecto, ocupan todo el espacio a lo ancho del contenedor.
El elemento HTML común para una caja de bloque es el elemento
`<div>`.

###📦 Cajas en línea (Inline boxes)
Las cajas en línea, por defecto, toman el espacio según el contenido envuelto. El elemento HTML más común para una caja en línea es el elemento `<span>`.

El comportamiento de todas las cajas proviene de la propiedad display de CSS. Si quieres aprender más acerca de esta propiedad te invito a leer mi [articulo] (https://codigofacilito.com/articulos/la-propiedad-display-en-css).

##📦 Las áreas del modelo de caja

Cada elemento HTML es una caja que tiene 4 lados y se compone de cuatro áreas:

#### Internos:
* `content` 
* `padding` 
* `border` 

#### Externos
* `margin`

Estas áreas se apilan para formar el modelo de caja o box model.
Cada elemento HTML es una caja que podemos controlar en el espacio exterior con la propiedad margin, después, podemos darle un borde y con la propiedad padding, también podemos proporcionar los espacios interiores entre el contenido y el borde dentro de la caja.

##🛠️ Herramienta de Desarrollo (DevTools)

Si vas a inspeccionar cada elemento HTML, En la herramienta de desarrollador de cada navegador hay una pestaña llamada "Estilos" y lo que hace es mostrar el modelo de caja.

ℹ️ Los colores pueden ser distintos dependiendo del navegador. 

* El content o contenido es representado por el color azul.
* El padding es representado por el color verde claro.
* El border es representado por un color amarillo.
* El margen es representado por un color naranja.
 
![box model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5h8byogi4mzsiuxxe7jw.png)

Si te posicionas en cada elemento HTML de la página web y lo seleccionas, estos elementos se pintaran de los colores que he mencionado y esto nos ayuda a detectar cuanto de padding o margin tiene cada elemento.  

## 🎦 Content
El contenido de la caja, donde aparecen texto, imágenes, etc.

El área del content (como su nombre lo dice) 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. Esta área en muchas ocasiones tiene un color o imagen de fondo para hacerla más atractiva.

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y0bhb4lmev3j36qodjhq.png)

Cuando se establece una anchura o una altura en un elemento, esto sólo se aplica al área de contenido (content) de la caja, no a la caja completa. El padding y border se añaden a la anchura y la altura para obtener el tamaño total de la caja, si quieres profundizar mas en este tema, te invito a leer mi articulo de Box Sizing:

{% link https://dev.to/lupitacode/que-es-el-box-sizing-en-css-2pi9 %}

## 🔲 Padding 

Es el área alrededor del contenido. El `padding` es transparente.

El padding es una separación o espacio interior que existe entre el contenido y el borde de la caja, el cual se utiliza para dar una apariencia estética más atractiva y que el contenido no este pegado al borde.

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. 

Puedes usar el mismo valor en toda la caja usando su shorthand, por ejemplo, `padding: 20px` o puedes darle `padding` sólo a un lado de la caja, por ejemplo, `padding-right: 10px`.

Es importante mencionar que NO se permiten valores negativos.

El shorthand `padding` permite dar un valor diferente a cada lado, sin necesidad de escribirlos por separado. Por ejemplo:

```
padding-top:    10px; 
padding-right:  20px; 
padding-bottom: 25px; 
padding-left:   5px;  
/* Los 4 valores son igual a esto: */
padding: 10px 20px 25px 5px;

padding: 10px;           /* Aplica a los cuatro lados */
padding: 10px 20px;      /* vertical | horizontal */
padding: 10px 20px 30px; /* top | horizontal | bottom */
```

🕒 Un truco para recordar los valores de la propiedad padding (top, right, bottom, left) es pensar en el sentido de las manecillas del reloj, empezando desde las 12hrs:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzncs2ziipydvlnq9jbi.jpg)

##⬜ Border

El borde es la línea que rodea la caja, es como la frontera que rodea al elemento, 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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/632ozf15t66crmlkqi11.png)

Las tres propiedades básicas para crear bordes son:

* `border-style`: sus valores son: [ none | hidden | solid | dotted | dashed | double | groove | ridge |
inset | outset ]
* `border-width`: indica al navegador el tamaño del borde, normalmente, se utiliza el valor en píxeles para esta propiedad, por ejemplo, `border-width: 5px`.
* `border-color`: por defecto, el valor utiliza el currentColor del texto. Sin embargo, preferimos definirlo aunque no sea necesario. Por ejemplo, `border-color: red`.

La mayoría de los desarrolladores web no utilizan estas tres propiedades por separado. En su lugar, existe el shorthand: `border`. Con este shorthand podemos escribir sólo `border: solid 5px red`.

También podemos controlar y dar un estilo diferente a cada parte de los bordes, por ejemplo:

```
border-width: 5px 10px 15px 20px; 
border-style: solid dashed dotted double; 
border-color: red green blue brown;
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y2mvxf809ztexwwnmrm2.png)

##🔳 Margin

Es la separación entre una caja y las cajas adyacentes.

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

Los márgenes siempre quedan fuera del modelo de caja, por lo que pueden utilizarse para crear espacio entre los elementos.

Recuerda que los valores pueden ser positivos o negativos.

```
margin-top:    10px; 
margin-right:  20px; 
margin-bottom: 25px; 
margin-left:   5px;  
/* Los 4 valores son igual a esto: */
margin: 10px 20px 25px 5px;

margin: 10px;           /* Aplica a los cuatro lados */
margin: 10px 20px;      /* vertical | horizontal */
margin: 10px 20px 30px; /* top | horizontal | bottom */
```

Es importante mencionar que varios elementos HTML tiene un margen que son asignados por la hojas de estilo del navegador. 

## Margin vs Padding 

Aunque estas dos propiedades son similares, a veces se utilizan erróneamente de forma intercambiable, aunque son muy diferentes. Entender sus diferencias puede ser beneficioso para los desarrolladores web.

![Diferencias entre la propiedad margin y padding](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cm8npdmxa0r15d74klzl.jpeg)

El padding y el margin son dos elementos importantes en el diseño web que añaden espacio extra en diferentes lugares. Pero, ¿Dónde y cuándo se debe utilizar uno en vez del otro?

Para el padding, puedes utilizarlo en las siguientes situaciones:

* Cuando no quieras que el contenido toque los bordes del contenedor.
* Cuando quiera aumentar el tamaño de un bloque de contenido sin que el propio contenido sea más grande.
* Cuando se necesita espacio entre un elemento interior y la caja padre.
* Cuando quieras que el background del elemento se muestre en el espacio generado. por ejemplo, si tienes dos divs, quieres que ambos divs (con diferente color de fondo) esten juntos, pero no quieres que sus textos se toquen.
* Cuando quieras aumentar el tamaño del elemento. Ejemplo: si quieres aumentar el tamaño de un botón.

Para el margin, puedes utilizarlo en las siguientes situaciones:

* Cuando necesite espacio alrededor de los elementos, como separar una imagen y la descripcion de la misma.
* Utilizarías el margen para establecer la distancia entre elementos cercanos.
* Cuando quiera centrar un elemento horizontalmente.
* Cuando quieras mover un elemento hacia arriba, hacia abajo o de lado a lado.
* Cuando quieras sobreponer elementos.

**Nota Adicional:** Muchos de nosotros tenemos una idea equivocada sobre el funcionamiento de los márgenes.
El margen sirve para aumentar la distancia entre hermanos. No esta pensado para aumentar la distancia entre un elemento hijo y su contenedor padre, para eso esta el `padding`.

El margen siempre tratara de aumentar la distancia entre hermanos, incluso si significa pasar el margen al elemento padre.

Hay una situación en la que el margen entre un elemento y el de un elemento vecino se fusionarán (o colapsarán) en un espacio unificado. Los márgenes colapsables pueden ser una molestia si no se entiende bien cuándo se producen, te recomiendo leer mi siguiente articulo:

{% link https://dev.to/lupitacode/entendiendo-el-colapso-de-margenes-margin-collapsing-4oj6 %}

##⬜ Outline

La propiedad `outline` (contorno) es la línea que rodea a la caja entre el `border` y el `margin`. 

![An illustration of the CSS box model, with the relevant parts described following this image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a0gbfl3s2nwcl7joob6d.png)

Se utiliza como su nombre lo dice para dibujar un contorno alrededor de un elemento. Un contorno es una línea que se dibuja fuera de los bordes de un elemento, comúnmente se suele confundir la propiedad outline con border, la diferencia entre ambos es que la **propiedad outline no afecta a las dimensiones del elemento ya que NO forma parte del modelo de caja.**

La propiedad outline NO solo se usa como decoración grafica, su uso principal es por motivos de **ACCESIBILIDAD**.

**La propiedad outline se usa principalmente en elementos interactivos como enlaces, botones e inputs** que tengan la pseudoclase `:focus`.  o bien en el elemento `<form>` que tenga la pseudoclase [`:focus-within`](https://css-tricks.com/almanac/selectors/f/focus-within/). Aqui una lista mas completa de donde usar outline:

* Links
* Buttons
* Form Fields / Controls (text fields, select boxes, radio buttons, etc.)
* Menu items
* Things triggered by hover, like tooltips
* Widgets, like a calendar picker

La pseudoclase `:focus` hace que estos elementos se activen cuando el usuario hace click sobre ellos o cuando presiona la tecla "TAB" del teclado y  se coloreen con una ligera aura que los rodea. Esto da la posibilidad al usuario de conocer en todo momento el elemento que recibe el foco y de pasar por los diversos elementos sin usar el mouse. 

Quizás pensaras que todos usamos el mouse para navegador por los sitios web, pero hay muchos usuarios que usan el teclado como su principal medio de usar la web, por ejemplo: usuarios que usan lectores de pantalla, usuarios con movilidad reducida, usuarios avanzados (desarrollador). Por esta razón no debes eliminar la propiedad outline de la pseudoclase `:focus`.

`outline` es una shorthand para las siguientes propiedades:

* `outline-width` acepta los mismos valores que `border-width`.
* `outline-style` acepta los mismos valores que `border-style`, excepto `hidden`.
* `outline-color` acepta todos los colores y las diversas formas de declararlos. También la palabra clave `invert`.

outline también cuenta con una propiedad asociada llamada  `outline-offset` que es usada para aumentar o disminuir el espacio que hay entre el outline y el border del elemento. 

🆕 Update de la propiedad outline

Ahora la propiedad outline se adapta automáticamente al radio del elemento. Anteriormente se dibujaba por defecto un contorno cuadrado. Funciona en las ultimas versiones de los principales navegadores excepto en Safari.

{% instagram CVeIF3rAhRG %}

Al principio de este articulo te mostré el siguiente snippet de codigo:

```
* {
    outline: 1px solid red;
}
```
Este es un pequeño hack que se usa para debuggear en CSS, no se usa la propiedad `border` ya que este afectaría a las dimensiones de los elementos.

##👫 Aportaciones de la comunidad

Kelly Vaughn publicó en su cuenta de twitter una foto donde explica el modelo de caja de una forma divertida 😂.

{% twitter 1159263383058862081 %}

Este hermoso demo interactivo para enseñar el modelo de caja en CSS por Caroline Artz es increíble, esta desarrollado en Angular:

{% codepen https://codepen.io/carolineartz/pen/ogVXZj %}.

##📋 Conclusión:

☑️ Cada elemento HTML en una pagina web es una caja rectangular.
☑️ El contenido de la caja es donde aparecen texto, imágenes, etc.
☑️ El padding es el área alrededor del contenido.
☑️ El borde es una línea que rodea el padding y el content.
☑️ El margin es la separación entre una caja y las cajas adyacentes.

##🔎Recursos:

* [Box Model | Web dev](https://web.dev/learn/css/box-model/)
* [Understanding the CSS Box-Model | Elad Shechter
](https://medium.com/cssclass-com/understanding-the-css-box-model-97e4228670d6)
* [Introducción al Box Model de CSS | Oscar Blancarte](https://www.oscarblancarteblog.com/2017/10/27/introduccion-al-box-model-css/)
* [Learn CSS intuitively - Box Model | Kushagra Gour](https://cssbattle.dev/blog/learn-box-model)
* [3D view | Firefox](https://developer.mozilla.org/es/docs/Tools/3D_View)
* [CSS margin vs. padding](https://blog.logrocket.com/css-margin-vs-padding/)
* [The 3 CSS Methods for Adding Element Borders](https://moderncss.dev/the-3-css-methods-for-adding-element-borders/)
* [Modern CSS Upgrades To Improve Accessibility](https://moderncss.dev/modern-css-upgrades-to-improve-accessibility/#focus-visibility)
* [Custom CSS Styles for Form Inputs and Textareas](https://moderncss.dev/custom-css-styles-for-form-inputs-and-textareas/)
* [CSS Button Styling Guide](https://moderncss.dev/css-button-styling-guide/)

Gracias por leer🦸🏻‍♀️
Mis redes sociales donde comparto notas de código:

[▶️Youtube](https://www.youtube.com/lupitacode)
[📷Instagram](https://instagram.com/lupitacode)
[🐦Twitter](https://twitter.com/lupitacode)
[🔵Facebook](https://facebook.com/lupitacode)
[🔲Codepen](https://codepen.io/lupitacode/)
[✍️Medium](https://lupitacode.medium.com/)
[🎵Tik Tok](https://www.tiktok.com/@lupitacode)