Modelo de caja

Las propiedades de margin, padding, se asignan en dirección a las manecillas del reloj, como bien dicen en la clase. En caso de no poner todos los valores…

No olvidemos el outline, que también hace parte del modelo de caja.

box model

Es una buena practica, dejar espacios entre el selector y la declaracion en CSS, por ejemplo

✅
p {
	color: red; 
}

❌
p{
	color: red;
}

tambien es buena practica, al establecer un valor a 0 no colocarle a unidad de medida.

p {
	padding: 0; ✅
	padding: 0px; ❌
}

Una buena practica es normalizar nuestro proyecto (eliminar los márgenes que vienen por defecto, entre otras cosas)

• Es bueno aprender a hacerlo pero agregando este archivo nos facilita todo ese proceso.
  https://necolas.github.io/normalize.css/
• Al Agregar el link en nuestro index o archivo.html debe ir primero que el link de la hoja de estilos principal para que no se vea afectado lo que estemos haciendo o definiendo.

A mi me encanta utilizar el generador de colores de material porque eso te pinta dónde lo deberías de utilizar:
https://material.io/resources/color/

Quisiera agregar esta recomendación:
A la hora de elegir el valor para el margin o padding la mejor opción es elegir valores que sean múltiplos de 4, ya que con esto aseguramos la mejor representación mediante la alineación de píxeles completos.
También adjunto la página de donde obtuve está información y que me pareció interesante.
Enlace a la página aquí

• Contenido: Es donde va el texto e imágenes.
• Padding: Es un relleno alrededor del contenido y este relleno es transparente por default.
• Border: Es el borde de la caja.
• Margin: Es el espacio fuera de nuestra caja.

Aquí tienen más opciones para buscar colores:

Coolors
Paletton
canva

Si ven que en el modelo de caja del navegador cambia solo las dimensiones del contenido y no el margen, border, …, es por que no están apuntando al elemento. Tienen que “clickear” al elemento en el inspector

box-sizing: border-box;

con esta línea de código hacemos que respete el tamaño que nosotros le colocamos a los elementos

La teoría del color es un grupo de reglas básicas en la mezcla de colores para conseguir el efecto deseado combinándolos.

Acá un sitio donde pueden encontrar muchas combinaciones para un color:
https://colorhunt.co/

Si se preguntan porque la caja del minuto 6:36 se ve más grande que la del minuto 3:30 (cuando la profe dijo que son iguales después de poner el box-sizing como border-box), el problema es que border-box suma el ancho del contenido + el ancho del padding (40, 20 de cada lado) + el ancho del border (tambien de cada lado, pero como es 0, es 0+0), entonces la caja del minuto 6:36 termina teniendo 40px de ancho, a comparacion de la primera caja del minuto 3:30 que tiene 20px (porque el contenido es de 20px, y el contenido no se suma de ambos lados, ya que está en el centro).

Les dejo unas clases para que entiendan mejor el problema, basicamente reduje el padding a 10px en la caja-3, para que tenga el mismo tamaño que la caja del minuto 3:30.

        .caja-1 {
            width: 20px;
            height: 20px;
            padding: 0px;
            border: 0px solid #000;
            box-sizing: content-box;
            background-color: blue;
        }

        .caja-2 {
            width: 20px;
            height: 20px;
            padding: 20px;
            border: 0px solid #000;
            box-sizing: border-box;
            background-color: green;
        }

        .caja-3 {
            width: 20px;
            height: 20px;
            padding: 10px;
            border: 0px solid #000;
            box-sizing: border-box;
            background-color: red;
        }

        .caja-4 {
            width: 20px;
            height: 20px;
            padding: 5px;
            border: 5px solid #000;
            box-sizing: border-box;
            background-color: yellow;
        }

Prueben esos estilos en su html, y creen los 4 divs, con sus respectivas clases!.

Con la propiedad ‘’‘box-sizing: border-box;’’’ mantenemos el tamaño del ancho y alto de nuestra caja interna delcontenido.

Enlace a la paleta de colores del vídeo.

https://colorhunt.co/

Para complementar el aprendizaje vi este vídeo que me ayudo muchísimo a entender el modelo de caja.

https://www.youtube.com/watch?v=SKkKLi1wAos

Les comparto esta guia me parecio maravillosa:
https://devcode.la/tutoriales/modelo-caja-css/

      .caja2 {
          background-color: red; (Color de fondo)
          width: auto; (Ancho)
          height: 50px; (Alto)
          padding: 15px; (limite del contenido)
          border: 20px solid black; (Borde del contenido)
          margin: 10px; (Margen alrededor de la caja)
          font-size: 30px; (Tamano de la fuente)
      }

La diferencia entre background y background-color es que background es un atajo (shorthand) es decir, puede recibir varios valores, mientras que con background-color hacemos referencia a una propiedad especifica para poder establecer un color.

.ejemplo {
	width: 500px;
	height: 500px;
	/* esto hace referencia a que se establesca una imagen de fondo pero que al mismo esta no se repita y este centrada*/
	background: url("url imagen") no-repeat center;
}

.ejemplo-2 {
	width: 200px;
	height: 200px;
	/* de esta otra manera solo se podra especificar el valor del color deseado */
	background-color: red;
}

background - css | MDN

Comparto mis notas, espero les ayuden:
https://www.evernote.com/l/AhASHJ7j0khKyZ6l7hGxe8-FFbamtOMmmbY/

Otra buena practica que no se explico bien aca, es reiniciar los estilos que el navegador trae por defecto de la siguiente manera.

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

De esta manera estaremos 100% seguros de haberle quitado todos los estilos por defecto que aplica el navegador a nuestro HTML.

modelo de caja CSS

Modelo de caja
Todos los elementos HTML tienen un modelo de caja y este modelo esta conformado por 4 elementos:
• Contenido: Se trata del contenido HTML del elemento, pueden ser palabras, imágenes entre otros contenido.
• Padding: Esta entre el borde y el contenido.
• Border: Se encuentra entre el margin y el pading.
• Margin: Es el margen que rodea por fuera todo el elemento que hemos creado.
Nosotros podemos manipular cada uno de estos elementos a nuestra conveniencia logrando distintos resultados dependiendo de cual sea lo que buscamos.
Por defecto las paginas web traen un margen ya predefinido, se considera como buena practica que nosotros se lo quitemos o lo modifiquemos, aunque también se puede dejar tal y como esta.
Una herramienta que nos puede ser de mucha utilidad es la consola y nos sirve para inspeccionar nuestros elementos html y ver cómo están conformados.

Les recomiendo utilizar, esta rueda de colores.

https://color.adobe.com/es/create

Modelo de caja

Del video entiendo que:

box-sizing: border-box;

es para que el contenido de la caja no se vea afectado por los valores que brindamos en border y/o padding, sin embargo, al momento de usarlo en el código, por lo que puedo observar, sólo me ayuda a que el valor que otorgue de border no afecte el tamaño del contenido de la caja.

Una buena analogía para entender un poco mejor el modelo de caja es que el contenido puede representarse como una casa, el padding representa la separación de los muebles entre las paredes de la casa, el border representa las paredes de la casa y el margin representa la separación de la casa con otras casas

También es puede establecer la propiedad box-sizing a todos los elementos del HTML y que los elementos que agreguemos hereden el mismo valor usando:

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

Aclarando: todo esto antes esta antes del minuto 03:32 del video, ya lo “corregí” en https://validator.w3.org/. Al parecer el <style></style> no puede ir entre head y body (adjunto imagenes), sería genial que alguien explique el porque por favor. Pero para ver el “20x20” en la parte de inspect hay que seleccionar la parte de de <div class=“caja”></div>, ya que si seleccionamos otras partes apareceran otras dimensiones, adjunto imagen 😄 Buenos deseos gente 😄
![](

![](

Al hacer una caja de tipo bloque en CSS tenemos los elementos siguientes:

El contenido de la caja: El área donde se muestra el contenido, cuyo tamaño puede cambiarse utilizando propiedades como width y height.
El área de relleno de la caja: El área de relleno es un espacio en blanco alrededor del contenido; es posible controlar su tamaño usando la propiedad padding y otras propiedades relacionadas.
El borde de la caja: El borde de la caja envuelve el contenido y toda el área de relleno. Es posible controlar su tamaño y estilo utilizando la propiedad border y otras propiedades relacionadas.
El margen de la caja: El margen es la capa más externa. Envuelve el contenido, el relleno y el borde como un espacio en blanco entre la caja y otros elementos. Es posible controlar su tamaño usando la propiedad margin y otras propiedades relacionadas.

box-sizing:border-box para que respete el ancho y el alto del elemento.

Saludos, por que si escribo en el css border: 10px blue; no aparece coloreado el border y si coloco la palabra “solid” si. Existe alguna otra propiedad aparte de solid?. Gracias

La diferencia entre el padding y el margen es que el padding funciona como relleno tanto si usas box-sizing o no, y el margen es un espacio que se va a reservar entre elementos , si tienes dos cuadrados y les pones margin: 10px va a separar los dos cuadrados 10px y no se van a poder pegar o juntar, van a estar separados forzomente.

Muchas veces les pasara que las etiquetas anidadas no respetara el modelo de caja como este ejemplo:

pero haciendo tal y como dice ahi, lo podemos solucionar. espero les ayude en un futuro

muy buena explicacion, pero creo que falta ser un poco mas especifico en cuanto a la ejemplificación de cada estilo en css, por ejemplo al momento de definir los 20px en ancho y alto, el padding de 20px se modificó el tamaño de la caja pero al utilizar box-sizing: border-box, en teoría tuvo que haber regresado a su tamaño inicial de los 20px, pero no lo hizo, quedó aun mas grande, pero porque? allí se vio afectado por el padding, pero ejemplos como estos no nos resolvieron dudas. 😃

también para buscar mas colores puedes poner la pagina https://htmlcolorcodes.com/es/

background y background-color no son lo mismo aunque se comporten muy parecido.

background es un shorthand es la forma abreviada de combinar muchas etiquetas de fondo en una sola línea. background

Hoy en dia se estan empezando a emplear las Propiedaes Logicas, en la siguiente imagen pueden echar un vistazo y pueden ver el equivalente de las Propiedasdes Fisicas a Logicas.

El modelo de cajas o “box model” es seguramente la característica más importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web. El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares.

Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento.

Las cajas de las páginas no son visibles a simple vista porque inicialmente no muestran ningún color de fondo ni ningún borde.

Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son las siguientes:

Contenido (content): se trata del contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.)
Relleno (padding): espacio libre opcional existente entre el contenido y el borde.
Borde (border): línea que encierra completamente el contenido y su relleno.
Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio de relleno.
Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de relleno.
Margen (margin): separación opcional existente entre la caja y el resto de cajas adyacentes.
El relleno y el margen son transparentes, por lo que en el espacio ocupado por el relleno se muestra el color o imagen de fondo (si están definidos) y en el espacio ocupado por el margen se muestra el color o imagen de fondo de su elemento padre (si están definidos). Si ningún elemento padre tiene definido un color o imagen de fondo, se muestra el color o imagen de fondo de la propia página (si están definidos).

Si una caja define tanto un color como una imagen de fondo, la imagen tiene más prioridad y es la que se visualiza. No obstante, si la imagen de fondo no cubre totalmente la caja del elemento o si la imagen tiene zonas transparentes, también se visualiza el color de fondo. Combinando imagenes transparentes y colores de fondo se pueden lograr efectos gráficos muy interesantes.

En el modelo de caja es importante tener en cuenta en todo momento el valor que le estamos asignando a los elementos para determinar el tamaño total, ya que estos por defecto se van sumando…

Para los que usan vscode existe la extensión** live server** con esta extensión se podría decir que corres tu código html en un servidor y ya no es necesario que recargues la pagina cada vez que realizas un cambio en el código.

HTML

Doc CSS

Resultado

Por fin entendí que es un padding 😃

No se acostumbren a escribir los estilos dentro de la etiqueta <style> dentro del mismo html, ya verán como más adelante les dicen que se utiliza un archivo .css para los estilos totalmente independiente y este se enlaza con la etiqueta <link> dentro de la etiqueta <head> con la estructura: <link rel=“stylesheet” href=“tu_archivo.css”>, de esta forma podemos utilizar los mismos estilos para diferentes html y poder reutilizar, reutilizar y reutilizar

Muy buena explicación estoy aprendiendo bastante.

Para el uso de margin y el padding en CSS se puede escribir de varias formas funcionando igualmente para las dos propiedades:

1.

margin-top: 2px;
margin-bottom: 2px;
padding-left: 3px;
padding-right: 3px;

2.

margin: 2px 3px; // El primer valor  "2px" se toma para top/bottom y el segundo valor "3px" para left/right.

3.

padding: 4px; // Este valor se toma para todos los 4 lados

4.

margin: 1px 2px 3px 4px; // En esta forma de escriben 4 valores cada valor para cada lado en siguiente orden: Top, Left, Bottom, Right. Si se olvida el orden solo hay que recordar que siempre comienza arriba "TOP" y sigue las manecillas del Reloj ⌚️

Vaya clase!! tenía dudas sobre “padding”, y se resolvieron. Gracias.

un poco de práctica…

Por aquí dejo un post que está muy interesante sobre box sizing . https://dev.to/lupitacode/que-es-el-box-sizing-en-css-2pi9 .

Excelente! https://colorhunt.co/

Respecto a Background y Background-color respecto a sus diferencias, me encontre esta respuesta:

background-color : Se refiere en especifico al color de fondo.

**Background **: Se puede utilizar “coma manera corta”, pero permite agregar mas propiedas u atributos por ejemplo:

background: #ffffff url("img_tree.png") no-repeat right top;********

Tomado de: stackoverflow

En CSS todos los elementos HTML se rigen bajo el modelo de caja. Este modelo esta compuesto por las siguientes secciones:

A continuación se describen cada una de estas secciones:

• Content (Contenido) : Como su nombre lo indica en esta sección se muestra el contenido de la etiqueta HTML (texto, image, video, etc)

• Padding (Relleno) : En esta sección se define el espacio interior que hay entre el borde y el contenido de la etiqueta HTML

• Border (Borde) : Esta sección permite especificar el borde al elemento.

• Margin (Margen) : En esta sección se define el espacio exterior que hay alrededor de la caja.

Acá les dejo un video donde nos enseñan las diferencias entre un padding y un margin por si quieren interiorizar un poco más en sus diferencias.
💙 Margin VS Padding en CSS - ¿Cúando usar cada uno?

Para que el Chrome me permita modificar los valores de las reglas CSS en el inspector de propiedades, tengo que poner la etiqueta <style> dentro de <head>.

El “modelo de caja CSS” es un conjunto de reglas que determinan las dimensiones de cada elemento en una página web. Le da a cada caja cuatro propiedades:

• Content: texto, imagen u otro contenido multimedia del elemento.

• Padding: el espacio entre el contenido del cuadro y su borde.

• Border: la línea entre el relleno y el margen del cuadro.

• Margin: el espacio entre la caja y las cajas circundantes.

Modelo de caja

¿Qué es el Modelo de Caja?

El modelo define cómo funcionan juntas las diferentes partes de una caja (margen, borde, relleno y contenido) para crear una caja que puedas ver en tu página. Para complicarlo un poco más, hay un modelo de cajas estándar y un modelo de cajas alternativo que suma el borde y padding en el ancho total.

Partes de una caja

Al hacer una caja de tipo bloque en CSS tenemos los elementos siguientes:

• El contenido de la caja (o content box): El área donde se muestra el contenido, cuyo tamaño puede cambiarse utilizando propiedades como width y height.
• El relleno de la caja (o padding box): El relleno es espacio en blanco alrededor del contenido; es posible controlar su tamaño usando la propiedad padding y otras propiedades relacionadas.
• El borde de la caja (o border box): El borde de la caja envuelve el contenido y el de relleno. Es posible controlar su tamaño y estilo utilizando la propiedad border y otras propiedades relacionadas.
• El margen de la caja (o margin box): El margen es la capa más externa. Envuelve el contenido, el relleno y el borde como espacio en blanco entre la caja y otros elementos. Es posible controlar su tamaño usando la propiedad margin y otras propiedades relacionadas.

El diagrama siguiente muestra estas capas:

Comandos

• Background-color es un propiedad de CSS que define el color de fondo de un elemento, puede ser el valor de un color o la palabra “transparente”.

  background-color: color | transparent | inherit
  

• La propiedad  width especifica la anchura del area de contenido de un elemento. El área de contenido está dentro del padding, borde, y margen del elemento.

  Las propiedades min-width y max-width sobreescriben el valor de width.

  /* Valores <length> */
  width: 300px;
  
  /* Valores <percentage> */
  width: 75%;
  
  /* Valores clave */
  width: max-content;
  width: min-content;
  width: available;
  width: fit-content(20em);
  width: auto;
  
  /* Valores globales */
  width: inherit;
  width: initial;
  width: revert;
  width: unset;
  

• La propiedad CSS height especifica la altura del area de contenido de un elemento. El área de contenido está dentro del padding, borde, y margen del elemento.

  Las propiedades min-height y max-height sobreescriben el valor de height.

  /* Valores clave */
  height: auto;
  
  /* Valores <length> */
  height: 120px;
  
  /* Valores <percentage> */
  height: 75%;
  
  /* Valores globales */
  height: inherit;
  height: initial;
  height: unset;
  

• La propiedad CSS padding establece el espacio de relleno requerido por todos los lados de un elemento. El área de padding es el espacio entre el contenido del elemento y su borde (border). No se permiten valores negativos.

  La propiedad padding es un atajo para evitar la asignación de cada lado por separado (padding-top, padding-right, padding-bottom, padding-left).

  /* Valores <length> */
  height: 120px;
  
  /* Valores <percentage> */
  height: 75%;
  

• Border es una propiedad abreviada para las siguientes propiedades CSS:

  • border-color: modifica el color de un borde
  • border-style: modifica el estilo de un borde
  • border-width: modifica el grosor de un borde

  border: <border-width><border-style><border-color> | inherit;
  

• La propiedad CSS box-sizing como el user agent debe calcular el ancho y alto total de un elemento.

  box-sizing: border-box; /*Ajusta el tamaño de la caja hasta el borde*/
  box-sizing: content-box; /*Ajusta el tamaño de la caja hasta el contenido*/
  
  /* Global values */
  box-sizing: inherit;
  box-sizing: initial;
  box-sizing: revert;
  box-sizing: unset;
  

  Aportes

• Las propiedades de margin, padding, se asignan en dirección a las manecillas del reloj si se va específicar uno por uno. Si queremos definir el mismo margen para arriba y abajo se pone de primeras y luego se pone de segundas los de los lados. Por ejemplo

  margin: 20px 60px; 
  /*Los márgenes arriba y abajo tendrán 20px; los márgenes a los lados tendrán 60px*/
  

• Una buena practica es normalizar nuestro proyecto (eliminar los márgenes que vienen por defecto, entre otras cosas)

  • Es bueno aprender a hacerlo pero agregando un archivo normalize.css nos facilita todo ese proceso.
  • Al Agregar el link en nuestro index o archivo.html debe ir primero que el link de la hoja de estilos principal para que no se vea afectado lo que estemos haciendo o definiendo.

Las propiedades y opciones del modelo de caja se explican mucho mejor en el curso de CSS Grid Layout! Esta nuevo y huele a limón.
https://platzi.com/clases/css-grid-layout/

Va en las el orden de las manecillas del reloj empezando por top, sigue right, bottom y finalmebte left ! 😃

Este curso está haciendo más fácil el integrar conceptos que antes se me hacía difícil comprender

Excelente la explicación!!

Muy buena la clase! sigamos.

Wow, excelente explicación del modelo de caja

Es increíble la cantidad de herramientas que nos da el navegador por defecto y no caemos en cuenta de su existencia…

Soy desarrollador y en mi universidad nunca nos dieron html, es bueno reforzar conceptos y aprender cada dia cosas nuevas

buen repaso del modelo de caja

MODELO DE CAJA (IMAGEN 9) (EJERCICIO modelo-de-caja.html)

- Se compone de 4 elementos:

    * El contenido - Lo que esta de color azul, que tiene las dimensiones
    * El padding - Esta entre el contenido y el borde, se encuentra dentro del elemento
    * El border - Borde del elemento
    * El margin - El espacio a fuera del componente (funciona con otros elementos a los lados)

Me encanta como se hace entender, éste era el tema que más confundido me tenía

Me gusta como explica las clases, la verdad ya tengo un poco de conocimiento sobre esto, pero retomar esto, de la forma en como lo explica, es muy sensacional y me ayuda a retomar conceptos.

Comparto recurso de la pagina que se nos comparte de mozila para ampliar más del tema sobre el padding en CSS
https://developer.mozilla.org/es/docs/Web/CSS/padding

Buenísimo curso, me hacía falta aprender Css

Este es mi código, sin embargo al parecer la caja 2 la coloca detras de la caja 1 de tal forma que no se observa.
¿Alquien sabe la razón?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
     body {
        margin: 0px;
    } 
    .caja1 {
        background-color: #ff9c91;
        width: 20px;
        height: 20px;
        padding: 20px;
        border: 2px solid #50b6bb;
        margin: 10px 20px 30px 40px;
    }; 
    .caja2 {
        background-color: #b196fd;
        width: 30px;
        height: 30px;
    }

</style>
<body>
    <div class="caja1"></div>
    <div class="caja2"></div>
</body>
</html>

!!!

Deberian dar una clase donde expliquen como usar main, section, article, aside, div, el uso de esas etiquetas suele confundir mucho.

Para que ciertas propiedades, no alteren el modelo de caja, entonces lo que hacemos es poner el box-sizing, como, border-box.

Podemos hacer un seteo de color, tanto con background, cómo de background-color.

Cada elemento en HTML, está compuesto por cuatro propiedades: Contenido, Padding (Qué se encuentra entre el borde y el contenido), luego está el border y por último está el margin (El espacio de afuera antes del borde).

Aquí hice el ejercicio, lo vi con el inspector de código y sí me muestra las medidas exactas… solo que yo metí style dentro del head…

Interesante cada clase.

Había visto otros tutoriales antes, pero este sin duda es muchísimo mas claro para quienes vamos iniciando, y nos da pie a jugar por nuestra cuenta para ganar experiencia con el modelo de caja 😄

Poco a poco se va armando todo esto y están interesantes los aportes de los demás estudiantes.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modelo de Caja</title>
</head>
<style>
    body {
        margin: 0;
    }
    .caja {
        width: 20px;
        height: 20px;
        padding: 20px;
        border: 2px solid #50b6bb;
        background-color: #ff9c91;
        box-sizing: border-box;
        margin: 10px 20px 30px 40px;
    }
    .caja2 {
        width: 30px;
        height: 30px;
        background-color: #fdef96;
    }
</style>
<body>
    <div class="caja"></div>
    <div class="caja2"></div>
</body>
</html>```

importante manejar el boxing-zise para que no afecte el diseño.

La propiedad box-sizing por defecto se aplica al content-box o contenido, pero podemos aplicarlo al border-box como muestra Estefany

Existe una documentación que ayuda mucho a entender el modelo de caja: MDN - Modelo de Caja

En el Curso Definitivo de HTML y CSS explican muy bien este tema, lo recomiendo.

Este es un archivo css para normalizar tu css. es muy util
https://necolas.github.io/normalize.css/

hay un pequeño codigo que hace que en el modelo de caja se respeten los tamaños definidos. es decir supongamos que definimos un div con las siguientes caracteristicas
width: 20px;
height: 20px;
padding: 20px;
queremos que tenga un alto de 20px y ancho de 20px por lo que nuestro div tendria que ser de 40x40 pero no lo es porque estamos añadiendo un padding de 20 por lo que se convierte en un div de 60x60 (20 de alto + 20 de ancho + 20 de padding)

lo que hace esl codigo es respetar nuestros tamaños definidos (width y height) aplicando tambien los otros valores como el padding. el codigo es el siguiente:

y respeta lo aplicado tal como lo habiamos definido anteriormente

espero les funcione y aca dejo el enlace para que quede mas clara la informacion https://www.paulirish.com/2012/box-sizing-border-box-ftw/

Importante conocer la teoría del color

Modelo de caja, compuesto por cuatro elementos: contenido, padding, border, margin.