Lupita Code 🌄

Posted on Jun 7, 2021 • Edited on Oct 26

¿Que es el Box Model?🤔

#css #spanish #latam

¡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:

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;
}

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

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.

📦 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.

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.

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:

¿Qué es el Box Sizing en CSS? 🤔

Lupita Code 🌄 ・ Apr 19 '21

#css #spanish

🔲 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:

⬜ 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:

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;

🔳 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.

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 descripción 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.

Si deseas agregar espacio al exterior de un elemento, usas la propiedad margin. El margen es como agregar un cojín alrededor del elemento.

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 eso 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:

Entendiendo el Colapso de Márgenes (Margin Collapsing) 😓

Lupita Code 🌄 ・ Jun 15 '21

#css #spanish #latam

⬜ Outline

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

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. 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.

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 😂.

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

Adam Argyle tambien comparte un demo del modelo de caja en 3D:

📋 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.