Modelo de caja

TIP: Hay una forma de hacer que CSS calcule el tamaño de un elemento (width o height, por ejemplo), restándole cierta cantidad.

Por ejemplo:
Imagina que quieres colocar 2 cajas dentro de una caja padre y quieres que cada una tome el 50% de ancho, pero que cada una tenga un margen a la izquierda de 10px. Si colocas width de 50% a cada caja y además le colocas margen, esto hará que las cajas queden una arriba de la otra, porque al agregarle 20px de espacio en márgenes, vas a hacer que ya no ajuste el 50% a cada caja.

Para hacer que ambas cajas sigan tomando el 50% contando los márgenes, puedes hacer lo siguiente:

.caja-hijo
{
	width: calc(50% - 20px);
}

Esto hará que el ancho se calcule, tomando en cuenta el 50% y los 20px que mantegan de margen.

Para usar padding/margin les recomiendo el siguiente truco:
Piensen en el sentido de las manecillas del reloj empezando desde las 12 y en ese orden va a ir tomando los valores para asignarlos al elemento

Una mejor práctica que usar el ‘*’ antes de todo en su CSS es utilizar Normalice CSS, sirve para ajustar los estilos que dan los navegadores web.
En este vídeo lo explican muy bien
Yo utilizo este archivo para todos mis proyectos web y me ayuda muchísimo.

Resumen

En la web los elementos se piensan en forma de rectángulos. A esto se le conoce como Modelo de caja.

Las cajas tienen parámetros que podemos editar en nuestro CSS

Margin

Espacio que hay del borde de la caja hacia afuera. Visualmente, permite separar a la caja de elementos externos.

Padding

Espacio que hay del borde de la caja hacia adentro. Visualmente, permite separar a la caja de elementos internos.

Border

Es el borde de la caja. Por defecto, a partir de ahí medimos las distancias de nuestra caja con elementos internos o externos.

Pensandolo como una casa:

• El margin es el jardin o la acera que te aleja de las otras casas.
• El border son tus paredes.
• El padding es el espacio que tienen tus paredes con tus muebles.
• El content son tus muebles.

Aunque el selector universal y hacer las reglas que se hicieron aquí es muy útil para solucionar esos problemas, NO es lo recomendable para proyectos reales, esto puede traers muchas desventajas y no lo deberías usar si vas a hacer un proyecto real, quiero dejarte este video donde te explican una mejor forma de hacer esto mucho más eficiente:

Las imágenes:

El Margin es un espacio fuera de la caja, este principalmente se hace para que haya un espacio entre diferentes elementos.

Mientras que el Padding es un espacio pero dentro de la caja.
Podriamos decir que es la separacion del contenido ante su borde, para que no se ve como sofocado el contenido dentro de su contenedor.

El box-sizing:border-box lo que hace es que el tamaño definido a la caja u contenedor no cambie pese a que tenga padding u borde asignado…
Si la caja tiene un tamaño de 700px este no cambiara su tamaño, siempre sera de 700px aunque tenga puesto padding u border

Para asignar un margin u padding se sigue las manecillas de un reloj

Esa propiedad de box-sizing:border-box, es lo máximo. aplíquenla por defecto. Y luego si no lo necesitan la sobreescriben.

SOBRE MÉTODOLOGÍA BEM
Parte 1:
https://youtu.be/sLR52rCpLdk

Parte 2:
https://youtu.be/P9qAT3v3fiE

Parte 3:
https://youtu.be/NG15gAwQeUc

Parte 4:
https://youtu.be/x3va_lLFRWs

Por defecto en el modelo de caja de CSS, el ancho y alto asignado a un elemento es aplicado solo al contenido de la caja del elemento. Si el elemento tiene algún borde (border) o relleno (padding), este es entonces añadido al ancho y alto a alcanzar el tamaño de la caja que es desplegada en pantalla. Esto significa que cuando se definen el ancho y alto, se tiene que ajustar el valor definido para permitir cualquier borde o relleno que se pueda añadir.
*
*
La propiedad box-sizing puede ser usada para ajustar el siguiente comportamiento:
• content-box es el comportamiento CSS por defecto para el tamaño de la caja (box-sizing). Si se define el ancho de un elemento en 100 pixeles, la caja del contenido del elemento tendrá 100 pixeles de ancho, y el ancho de cualquier borde o relleno ser añadirá al ancho final desplegado.
• border-box le dice al navegador tomar en cuenta para cualquier valor que se especifique de borde o de relleno para el ancho o alto de un elemento. Es decir, si se define un elemento con un ancho de 100 pixeles. Esos 100 pixeles incluíran cualquier borde o relleno que se añadan, y la caja de contenido se encogerá para absorber ese ancho extra. Esto típicamente hace mucho más fácil dimensionar elementos.

/*El código con el que siempre debemos iniciar nuestro CSS 😉*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

Toda la info en https://developer.mozilla.org/es/docs/Web/CSS/box-sizing 🤓

experimentando un poco.

Referencia MDN
El modelo de cajas CSS estándar
En el modelo de cajas estándar, cuando estableces los atributos width y height para una caja, defines el ancho y el alto del contenido de la caja. Cualquier área de relleno y borde se añade a ese ancho y alto para obtener el tamaño total que ocupa la caja. Esto se muestra en la imagen que encontrarás a continuación.

Si suponemos que la caja tiene el CSS siguiente, que establece los valores para las propiedades width, height, margin, border, y padding:

.box {
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

El espacio que ocupa nuestra caja usando el modelo de cajas estándar será en realidad de 410 px (350 + 25 + 25 + 5 + 5); y su altura, de 210 px (150 + 25 + 25 + 5 + 5), porque el área de relleno y el borde se añaden al ancho que se utiliza para el contenido de la caja.

Nota: El margen no se cuenta para el tamaño real de la caja; por supuesto, afecta al espacio total que la caja ocupa en la página, pero solo al espacio de fuera de la caja. El área de la caja se termina en el borde, no se extiende hasta el margen.

El modelo de cajas CSS alternativo
Podrías pensar que es más bien incómodo tener que sumar el borde y el área de relleno para obtener el tamaño real de la caja, ¡y tienes razón! Por este motivo, CSS introdujo un modelo de caja alternativo algún tiempo después del modelo de cajas estándar. Con este modelo, cualquier ancho es el ancho de la caja visible en la página, por lo tanto, el ancho del área de contenido es ese ancho menos el ancho para el relleno y el borde. El mismo CSS que hemos usado antes daría entonces el resultado siguiente (ancho = 350 px, altura = 150 px).

Por defecto, los navegadores usan el modelo de cajas estándar. Si deseas activar el modelo de cajas alternativo para un elemento, hazlo configurando box-sizing: border-box. Con ello, le dices al navegador que tome como el borde de la caja el área definida por cualquier tamaño que establezcas.

.box { 
  box-sizing: border-box; 
} 

Cuando hablamos de Modelo de Caja o Box Model es posible que nos encontremos con el término Layout.

–
Layout se refiere a la geometría de los elementos, define como, con que tamaño, con que separación, y en que posición se dibujaran los elementos en pantalla.

El modelo de caja es el algoritmo por el cual el navegador dibuja las cajas en pantalla.
En este modelo tenemos tres cajas internas:

• content box
• padding box (separación del borde con el contenido.)
• border box
  Y de último una caja externa invisible:
• margin box
  Este último es un margen que separa dicho elemento del resto de elementos.

Nota: Tener en cuenta que los porcentajes son relativos al tamaño del elemento padre. En este caso como usamos un ancho 100% en main, y su padre es body, por eso tomo todo el ancho de la pantalla, Si previamente a body le hubiéramos declarado ancho de 50px, el 100% de main serian 50px.

Con estas clases no me preocupo del tiempo que demoren, me concentro tanto que solo avanzo y avanzo y avanzo, nunca paro de aprender 💚

es un quebradero de cabeza esta clase, el modelo de cajas es lo que menos me gusta y lo que menos entiendo de css

Clase 25 - Modelo de caja

¿Qué forma tienen los elementos HTML cuando son renderizados?

• Forma de cajas.

¿Cómo se le llama a los estilos que se les puede agregar a las cajas que conforman los elementos de HTML?

• Modelo de caja.

¿Cuáles son los estilos que podemos aplicar al modelo de caja?

• Margin.
• Border.
• Padding.
• Content
• Width.
• Height.

¿Qué es margin en el modelo de caja?

• Es el espacio externo que hay entre una caja y otra.

¿De qué color es el margin de un elemento HTML?

• Transparente.

¿Qué es el border en el modelo de caja?

• Es el contorno de un elemento.

¿Qué aspectos modificar del border en CSS?

• Estilo o forma.
• Ancho.
• Color.

¿Cuál es el color por defecto del border de un elemento?

• Transparente.

¿Qué es el padding en el modelo de caja?

• Es el espacio interno que hay entre el border y el content del modelo de caja.

¿Para qué podemos usar el padding?

• Para reubicar el content en el modelo de caja.

¿Qué otro nombre podemos usar para referirnos al padding?

• Relleno.

¿Qué es el content en el modelo de caja?

• Es el contenido de una etiqueta HTML, por ejemplo:
  +Texto.
  • Imagenes.
  • Videos.
  • Formularios.

¿Qué es el width y el haight del content en el modelo de caja?

• Width: Ancho del content.
• Height: Alto del content.

¿Qué posiciones podemos dar a un elemento con CSS?

• Top: Arriba.
• Right: Derecha.
• Bottom: Abajo.
• Left: Izquierda.

¿De qué color es el color de fondo por defecto de un elemento HTML?

• Transparente.

¿Los elementos HTML tienen una imagen de fondo por defecto?

• No.

¿Para qué nos sirve la propiedad width?

• Para manipular el ancho de un elemento HTML.

¿Para qué nos sirve la propiedad height?

• Para manipular el ancho de un elemento HTML.

¿Para qué nos sirve la propiedad border?

• Para manipular el borde de un elemento HTML.

¿Qué aspectos podemos modificar del borde de un elemento con la ayuda de la propiedad border?

• Ancho.
• Estilo o forma.
• Color.

¿Qué resultado obtenemos con la declaración border: 10px solid grey?

• El resultado que tenemos al usar esta declaración es un borde visible y continuo de color gris y de un ancho de 10px.

¿Para qué nos sirve la propiedad padding?

• Para agregar un espacio interno a un elemento HTML.

¿Cómo es la distribución del padding en un elemento HTML si a la propiedad padding le damos dos valores?

• El primer valor se asigna a la parte de arriba y de abajo, mientras que el segundo valor se asigna a la parte de la derecha e izquierda.

¿Cómo es la distribución del padding en un elemento HTML si a la propiedad padding solo le damos un valor?

• Este valor se asignará arriba, a la derecha, abajo y a la izquierda.

¿Cómo podemos ser específicos a la hora de asignar un valor arriba, a la derecha, abajo o a la izquierda usando las propiedades border, margin y padding?

• Agregándole a estas propiedades lo siguiente:
  • -top = se asigna el valor solo a la parte de arriba del elemento.
  • -right = se asigna el valor solo a la parte derecha del elemento.
  • -bottom = se asigna el valor solo a la parte de abajo del elemento.
  • -left = se asigna el valor a la parte izquierda del elemento.

¿Qué propiedades determinan el tamaño total de un elemento HTML?

• Border.
• Margin.
• Padding.
• Width.
• Height.
• Como vemos es muy importante a la hora de asignar un tamaño a un elemento que todos los valores anteriores se suman para dar el tamaño real de un elemento.

¿Qué pasa si no tenemos en cuenta los valores de border, margin, padding, width y height a la hora de asignar un tamaño a un elemento HTML?

• Podríamos generar un scroll hacia los lados, lo cual es una mala experiencia para los usuarios.

¿Cuál es el selector universal?

• Se representa con el símbolo del asterisco (*).

Para qué nos sirve el selector universal?

• Para darle estilos a todos los elementos de HTML que tenga el proyecto.

¿Cómo podemos resetear los estilos que asignan los navegadores a los elementos HTML?

• Lo podemos hacer usando la siguiente regla CSS:

*
{
   padding: 0;
   margin: 0;
}

• Lo que estamos haciendo con esta regla es eliminando el padding y margin que tengan los elementos de HTML. Es importante que esta regla de CSS la escribamos al inicio de nuestro archivo CSS, de lo contrario podríamos estar sobreescribiendo estilos anteriores a este.

¿Para qué nos sirve la declaración box-sizing: border-box?

• Con esta propiedad podemos hacer que el navegador tenga en cuenta automáticamente los valores de padding, border, width y height, para calcular el tamaño de un elemento HTML y no se cree un scroll hacia los lados sin que nosotros lo queramos.
• Sintaxis:

box-sizing: border-box;

Siempre comienza tu css con

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

Acerca del:

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

En lo personal yo no lo aplico porque me elimina algunos margins que en realidad me erán útiles y que al final tengo que volver a poner, como los de los párrafos o encabezados. Además en algunos sitios (o canales de Youtube) recomiendan no usar esta regla.
¿Qué se podría hacer entonces?
En cuanto al scroll horizontal, este es causado por dos cosas:

• El body tiene un margin por defecto, el cual se puede quitar con un margin: 0 SOLO en el body.
• Al poner width: 100% en el main, lo que se está tratando de hacer es que ocupe todo el ancho. Esto es innecesario ya que main es un elemento de bloque, y como tal por defecto ocupa todo el ancho que tenga disponible (incluso tomando en cuenta el padding y el border). Por lo que esta declaración se puede omitir y ya no tendríamos que usar box-sizing: border-box.
  Lo que yo hago es poner margin: 0 SOLO en el body ya que es lo único que causa problemas (en la mayoría de los casos).
  Pero existe una mejor solución: existe una librería llamada Normalize.css que es una hoja de estilos que elimina algunos margins y padding que pueden ser molestos, dejando los que si sirven.

Modelo de Caja:

Box sizing

Se refiere a la manera en que las cajas fuera del contenido son calculadas. La manera por defecto es content box en esta se le suman al contenido los valores del padding, border y margin.

La otra que se vio es border box en la cual se reduce el contenido para que el padding, border y margin, encajen en el ancho y alto definido.

Espero que les sea util, los ejemplos los saque de este post Modelo de caja

Aca les dejo un articulo del desarrollador de google que implemento el box-sizing:border box para que le den una leida de como funciona a fondo
https://www.paulirish.com/2012/box-sizing-border-box-ftw/

Así se especifican los valores en padding y margin en sentido de las maneceillas del reloj:

main {
	padding: 10px 15px 45px 30px; // arriba derecha abajo izquierda
padding: 10px 15px 45px; // arriba derecha/izquierda abajo
padding: 10px 15px // arriba/abajo derecha/izquierda
padding: 10px // aplica el mismo padding en los cuatro lados
}

Si te fijas en el caso de solo poner 3 o 2 valores, este se a completa con su contrario es decir, que el mismo valor de arriba se a completa con el de abajo y el de la izquierda con el valor de su opuesto que es la derecha.

Para entender mejor lo explicado sobre el box-sizing y border-box, les recomiendo leer esto:

https://developer.mozilla.org/es/docs/Web/CSS/box-sizing

NOTA IMPORTANTE:
Nunca se olviden de la propiedad box-sizing, creanme que la van a necesitar en muchas ocasiones.

width: calc(100% - 72px);

Chau Scroll 😃

alignment

Modelo de Caja: todos los elementos se renderizan en forma de caja y tendran
un acho y un alto y una posicion segun el valor que le demos con el width y height
le damos el ancho y alto que necesitamos
el borde es una linea que rodea nuestra caja no es visible hay que darle color para identificarla
margin es la separacion que hay entre los contenedores o cajas,ejemplo: para separar imagenes usamos margin
el padding es la separacion que hay desde la orilla de la caja hacia adentro

Este contenido me ayudó a entender mejor, y da unas anotaciones buenas: https://silicodevalley.com/el-modelo-de-caja-en-css/

Saludos a todos. El aprendizaje autodidacta es un camino arduo lleno de obstaculos y dudas. No tengas miedo en pedir ayuda o caminar junto a otros por estos cenderos desconocidos.

https://discord.gg/A3KKHHGA

Aca les dejo una invitacion a un club de estudio en discord, para compartir junto a otras personas nuestras dudas y dilemas.

Espero les sirva ❤️

/* El selector universal se representa con "*", lo que le apliques a este selector se aplicara a todas las cajas (contenedores) del navegador*/
*
{
    padding: 0;
    /*Quita el paddign de cualquier contenedor, si el navegador da una cantidad de pixceles por defecto a "x" contenedor esta declaracion los anula*/
    margin: 0;
    /*Quita el margin de cualquier contenedor, si el navegador da una cantidad de pixceles por defecto a "x" contenedor esta declaracion los anula*/
    box-sizing: border-box;
    /*Hace que el tamaño del contenedor + el padding + el border = al width que le diste al contenedor*/
    /*Podemos ver un jemplo de esto en el contenedor de main, donde le decimos a main que su hancho va a ser del 98% del espacio disponible en el navegador, que el padding va a tener una altura equivalente al 5% de 500px y el ancho va a tener un 10% de la altura del contenedor, y el borde va a tomar 10px del las dimenciones totales del tamaño del contenedor, todo esto sin afectar o modificar el tamaño de este*/
}

main
{
    width: 98%;
    height: 500px;
    margin: 1%;
    border: 10px solid grey;
    padding: 5% 10%;
}

chicos les recomiendo que sigan el video de normalize del compañero es muy interesante y no se tienes que matar la cabeza haciendo calculos https://www.youtube.com/watch?v=TeQgd0NS_lQ&t=8s

Yo creo que mis dos profesores favoritos son : Diego de Granda y Freddy

📦 El modelo de caja es una de las característica más importante de CSS.

*{
    /*Resetear estilos*/
    box-sizing: border-box; /*Saca el excedente que viene por default del witdh restando el padding y el border para que no se salga del navegador*/
    padding: 0; /*espacio hacia adentro*/
    margin: 0;  /*espacio hacia afuera*/
}
main{
    width: 100%; /*ancho*/
    height: 500px;  /*alto*/
    border:10px solid grey; /*borde de 10px solido para que se pueda ver y gris*/
    padding: 20px 35px; /*espacio hacia adentro 20px arriba abajo, 35px derecha izquierda*/
}

Esta seria la anatomia basica de una pagina web

Codigo HTML

<!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">
    <meta name="description" content="Descripcion del contenido de la pagina"> 
    <meta name="robots" content="index,follow"> 
    <link rel="stylesheet" href="./stylesweb.css"> 
    <style>     
    </style>     
    <title>Anatomia Web</title>  
  </head> 

  <body>  

    <header> 
          <h2>Este es el Header</h2> 
        <nav>  
          <h3>Este es el Nav</h3> 
        </nav>
    </header>

    <main>         
      <section>
        <h1>Este es el Main</h1>          
      </section>
    </main>

    <footer>  
        <h1>Este es el Footer</h1> 
    </footer>   
    
  </body>

</html>

Codigo CSS

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

header
{
    width: 100%;
    height: 150px;
    border: 5px solid blue;
    padding: 20px 35px;
    text-align: center;
}

nav
{
    width: 100%;
    height: 30px;
    border: 5px solid red;
    padding: 20px 35px; 
}

main
{
    width: 100%;
    height: 399px;
    border: 10px solid black;
    padding: 20px 35px;
    text-align: center;
}

footer
{
    width: 100%;
    height: 100px;
    border: 10px solid green;
    padding: 20px 35px;
    text-align: center;
}

Es mejor decir que el margin es el espacio externo al border y el padding es el espacio interno al borde. Nada que ver con esa metáfora del espacio externo del cuerpo. Dejen la cháchara. Ha sido difícil estudiar este curso porque lo siento desordenado o se dedican a explicar de una como funcionan y operan las vainas, sin antes decir para qué sirven o su definición… o se ponen a usar metáforas que nada que ver.

Porque realmente no es de la caja haciia afuera o adentro, ya que la caja es el conjunto de todo el margin, border, padding, content, o así lo puede entender una persona que apenas está aprendiendo. Sean más concretos.

Quizá si las posiciones del margin y del padding las vemos de la siguiente manera nos puede ayudar a entenderlo mejor:
.
top: 12 (en el reloj)
right: 3 (en el reloj)
bottom: 6 (en el reloj)
left: 9 (en el reloj)

25.-Modelo de caja

Los elementos que se renderizan se renderizan como cajas (contenedores) a las que se les pueden agregar ciertos estilos hence “Modelo de caja”.

• Margin: puede ser un espacio externo, de la caja hacía afuera.
• Border: es la línea que define a cada uno de los elementos, puede estar o no estar. Por default viene transparente pero le podemos poner color y ancho.
• Padding: es un espacio interno, nos ayuda a posicionar un poco el contenido de la caja.
• Content: puede ser cualquier elemento
  • Width: largo, el tamaño del contenido.
  • Height: el alto que queremos que tenga.

Hay que tener cuidado con las dimensiones extra, siempre hay que tomarlas en cuenta

“*” selector universal

box-sizing: border-box; : toma el 100% del width que tengamos libre. Suma el padding con el width del elemento y hace un calculo automático donde le resta el padding y el border. El margin no lo recalcula entonces si genera un excedente.

Es recomendable siempre utilizar *?
Osea evangelizarlo en todos los proyectos?

Me gusta leer los comentarios, son muy útiles, también se aprende.

Utilizé todo lo aprendido con el modelo de caja aqui.

modeloDeCaja(margin(border(padding(content))))

En CSS, el término “modelo de caja” se usa cuando se habla de diseño y diseño.

El modelo de caja CSS es esencialmente una caja que envuelve cada elemento HTML. Consiste en: márgenes, bordes, relleno y el contenido real…

https://www.w3schools.com/Css/css_boxmodel.asp

Normalize.css es clave en esto

💡Hay diferentes formas de resetear los valores de CSS a sus valores predeterminados:

1. Utilizar un archivo de reset CSS: Se trata de un archivo CSS que establece todos los valores de estilo en sus valores predeterminados. Algunos ejemplos de archivos de reset CSS populares son Normalize.css y Reset.css.

2. Usar el selector universal (*) para establecer los valores de estilo en sus valores predeterminados: Este enfoque establece todos los valores de estilo para todos los elementos HTML en sus valores predeterminados. La que vimos en clase :

css

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

1. Utilizar un framework CSS: Algunos frameworks CSS, como Bootstrap, incluyen sus propios archivos de reset CSS o tienen su propio sistema de grillas que establece valores de estilo predeterminados para asegurar la coherencia entre los navegadores.

Es mejor práctica, sobre todo para proyectos que van a producción, usar Normalize CSS.

Y entonces, ¿Qué hacemos con el margin?

Ya sabemos como hacer que el padding y el border formen parte del cálculo del width de la caja que es con la propiedad box-sizing y su valor border-box :

* {
	box-sizing: border-box;
}

Y como el profesor nos explicó, el margin no pasa a formar parte de este calculo y nos puede generar un scroll en la pagina, para esto podemos hacer uso de la funcion calc( ) dentro de la propiedad width, donde le indicaremos que le reste la cantidad de margin x 2 al width del elemento:

Elemento {
	margin: 20px;
	width: calc(100% - 40px)
}

Así solucionaríamos el problema del scroll generado por el margin.

Aquí va una ayuda para tener más claro el tema de Padding:

El padding se puede aplicar de forma específica a un lado colocando: padding-top, padding-right, padding-bottom, padding-left. O recibe cuatro valores, los cuales (como se muestra arriba) son top, right, bottom, left.

OJO: Si recibe 3 parámetros, entonces el valor de la mitad es para la izquierda y la derecha. Si recibe 2 parámetros, entonces el primer valor es arriba y abajo y el segundo valor es derecha e izquierda. Si solo recibe 1 parámetro, entonces el valor se aplica a todos los lados.

Más info aquí: https://www.w3schools.com/css/css_padding.asp

• Los elementos se renderizan en cajas y estas cajas se le agregan los estilos y esto es el modelo de caja.
• margin es el espacio externo, de caja hacia afuera.
• border, viene con los elementos, puede estar transparente o con un color y ancho específico.
• Padding, es el espacio interno, de la caja hacia adentro. nos ayuda a posicionar contenido.
• el contenido, es el elemento a renderizar. Con ello tenemos el with, ancho del contenido y el higth, alto del contenido.
• Dependiendo del position que se encuentre el contenido, podemos hacer uso top y button, left y right

* {
box-sizing: "border-box"; /*suma el width + padding + border*/
padding: 0;
marging: 0;
}

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

/* Es recomendable aplicar siempre al código estos valores del selector universal */
* {
    box-sizing: border-box; /* Permite usar el 100 del navegador, sumando el padding con el width del contenido*/
    padding: 0;
    margin: 0;
}

main {
    width: 100%; /*Como quiero percibir el ancho del cotenido (en % de la caja)*/ 
    height: 500px;
    border: 10px solid grey; /* atributo sólido para ver un el border */
    padding: 20px 35px; /* Primer digito para top y bottom, segundo para left y right  */
}

modelo de caja

Esta clase es hermosa ¡

Hola a todas y todos este es mi primer comentario serio en platzi jajaj
Les quiero recomendar los siguientes links:

• https://necolas.github.io/normalize.css/ Este es para aplicar reglas y normalizar los valores para los diferentes navegadores.
• https://www.paulirish.com/2012/box-sizing-border-box-ftw/ Este es para aplicar el box-sizing.
  Muchos exitos a los que recien empiezan y nunca paren de aprender a los que ya saben jajaj
  Saludos!

Para no tener que generar el archivo css manualmente pueden realizar el siguiente comando
ctrl + click derecho en el nombre del archivo ->

<link rel="stylesheet" href="style.css">

MODELO DE CAJA

• Margin: Área externa del elemento. Se modifica con la propiedad margin

• Border: Borde que encierra al padding (relleno). Se modifica con la propiedad border

• Padding: Espacio de relleno interno de la caja. Se modifica con la propiedad padding

• Content: Es el texto, imagen o video. Se modifica con width y height

Al definir width y height de un elemento, se aplica solamente al área del content. Para calcular el tamaño completo, se debe tener en cuenta el padding, border y margin. A menos que definamos la propiedad box-sizing en border-box

box-sizing: content-box /*El width y height se aplican al área del content.*/

box-sizing: border-box /*El width y height se aplican al área que engloba todo el border, osea, la suma del content, padding y border. *//**/

El navegador aplica por defecto algunos estilos (como padding, margin, etc). Para ponerlos en 0 de forma global, se usa Normalize.css

Hola, les comparto mi archivo CSS correspondiente a esta clase, el cual incluye apuntes de la clase para explicar el código. También lo complementé con algunos consejos que encontré en los comentarios de los demás. Espero les sirva.

* { /* Este es el selector universal. Las reglas CSS que aquí se especifiquen se aplicarán a todos a los elementos de la página web. */
    box-sizing: border-box; /* El valor border-box en el box-sizing hace que el padding y el border pasen a formar parte del cálculo 
        del ancho de la caja y no lo suman posteriormente. */
    padding: 0;
    margin: 0;
    /* En este caso lo que estamos intentando es quitar todos los espacios adicionales que el navegador agrega automáticamente. En otras
    palabras, estamos restaurando los valores de CSS para todos los navegadores */
}

/* Otra forma más recomendable de restaurar los valores CSS de tus proyectos, es utilizando Normalize.CSS (https://necolas.github.io/normalize.css/)
   Simplemente se guarda el archivo CSS dentro de la carpeta de estilos del proyecto, y se carga en el HTML mediante la etiqueta "link". */

main {
    width: 100%;
    height: 500px;
    border: 10px solid grey;
    padding: 20px 35px;
    /* Es importante estar conciente que las distancias de border y padding son adicionales al ancho del elemento, si no se configura la
    propiedad "box-sizing", cuyo valor por defecto es "content-box". Por ello, es posible que al final el elemento parezca ser más grande 
    de lo que tu querías. Debes asegurarte que la suma de todas las distancias no exceda las dimensiones finales que tu quieres. */
}

/* Hay una forma de hacer que CSS calcule el tamaño de un elemento (width o height, por ejemplo), restándole cierta cantidad.

.class
{
	width: calc(50% - 20px);
}

Con esto, el navegador hace el calculo de la resta para que al final realmente tengas el 100% del ancho y no más.
*/

Ya que el profesor mencionaba el tema de reiniciar los estilos pues cada navegador le establece un padding y un margin entre otras propiedades a las páginas, se puede usar una herramienta que hace todo eso de forma automática, se llama normalize y lo único que hay que hacer es descargarlo y agregarlo a la carpeta de los estilos css, y luego desde el html se linkea tal cual como se hace con la hoja de estilos que nosotros creamos, (recomendable linkear el normalize antes de todas las hojas de estilo que creemos).

https://necolas.github.io/normalize.css/

Espero les ayude en algo.

ahora con los ajustes de esta clase…

Para los que somos principiantes en esto, una analogía para el modelo de caja
Relacionen que el content (contenido) es una persona, el padding es una armadura que esta puesto esa persona, el border es ponerle unas puas alrededor de toda la armadura y el margin, como explico diego seria el estirar el brazo de esa persona.
Por ende el padding es un espacio interno, es decir el espacio interno que hay entre la persona y la armadura, y el border las puas.
No se si se hizo mas fácil o los confundí peor jaja pero yo le entendí así mas rápido.

Explicación problema con modelo caja - común en Frontends

OjO:

box-sizing: border-box;

Box-sizing

Nota: border-box permite ajustar mucho mejor el contenido porque toma en cuenta el padding y border al momento de calcular el width final de la caja

así va mi menú…

hasta el momento con mucho power.

Recordar que comenzar tu CSS con:

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

se considera una mala practica en su lugar es mejor usar Normalize.css

Tutorial de Normalize.css aqui.

box-sizing: border-box;

-> width - (padding + border)

Concejo, siempre tengan como primera opción el padding, sobre todo si están iniciando, ya que si no se sabe usar bien el margin tiene puede generar problemas el layouy y unos cuentos jalones de pelos jajajaja, creanme, me pasó mucho 😂😂…

padding: 20px; 
/*arriba - derecha - abajo - izquierda*/
padding: 20px 35px; 
/*arriba - abajo y derecha - izquierda*/
padding: 10px 20px 30px;
/*arriba, izquierda - derecha y abajo*/
padding: 10px 20px 30px 40px; 
/*arriba, derecha, abajo, izquierda*/

MARGIN:

• Espacio externo de la caja hacia afuera.
  BORDER:
• Es la línea que define a cada uno de los elementos. Se le puede poner un color o cambiar el ancho.
  PADDING:
• Espacio interno de la caja hacia adentro. Nos ayuda a posicionar el contenido de la caja.
  CONTENT:
• Toda la información que se encuentra dentro de la caja.
• Dentro del CONTENT tenemos dos clases principales:
  Width - Ancho El ancho que queremos que la caja o dicho contenido tenga.
  Height - Alto. El alto que queremos que tenga.

Modelo de caja

MARGIN: Este puede ser un espacio externo de la caja hacia fuera es un espacio.

BORDER: Es la linea que va a definir a cada un de los elementos, este por default viene transparente y nosotros podemos agregarle color y ancho para que el elemento pueda tener un border visible.

PADDING: Este a diferencia del margin no es un espacio externo de la caja hacia fuera, es un espacio interno de la caja hacia dentro y este nos ayuda a posicionar el contenido de la caja, con este podemos jugar un poco mas con el contenido ya sean texto o imágenes.

CONTENT: Puede ser texto, imágenes, video o cualquier elemento que vayamos a ver una vez que se renderice.

Tenemos una clase que se llama WIDTH es lo largo que va a generar el tamaño de la caja contenedora o tamaño del contenido y el HEIGHT que es el alto que queremos que tenga, teniendo estas dos clases podemos empezar a jugar con las dimensiones de las cajas.

Dependiendo de el position en el que se encuentre el contenido podemos jugar con el BOTTOM, RIGHT, LEFT y TOP esto quiere decir posicionarlo en estos 4 elementos.
Estos son los estilos que podemos agregar para cambiar el estilo predeterminado del navegador.



(*) asterisco es un selector universal en CSS.

¿De que forma puedo quitar los estilos predeterminados en el navegador?

*{

padding: 0;
Margin: 0;
}

Agregando a esto box-sizing: border-box;

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

Lo que hace box-sizing: border-box; es que hace que el navegador haga un calculo automático por ejemplo del tamaño del width que yo tengo voy a restarle el padding y el border para que no se salga del navegador, para que tengamos la dimensión justo y evitemos ese scroll extra.

Para los compañeros que de pronto no les quedo claro el tema de box-sixing, como a mi, les dejo esta pagina donde lo explican muy bien.
https://midu.dev/que-es-y-para-que-sirve-box-sizing-border-box/

reiniciar marginy padding se hace con:

*{
padding:0;
margin:0;
}

Notes

• Box Model

width

The width CSS property sets an element’s width. By default, it sets the width of the content area, but if box-sizing is set to border-box, it sets the width of the border area. The min-width and max-width properties override width.

/* <length> values */
width: 300px;
width: 25em;

/* <percentage> value */
width: 75%;

/* Keyword values */
width: max-content;
width: min-content;
width: fit-content(20em);
width: auto;

https://developer.mozilla.org/en-US/docs/Web/CSS/width

height

The height CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box, however, it instead determines the height of the border area.

/* <length> values */
height: 120px;
height: 10em;

/* <percentage> value */
height: 75%;

/* Keyword values */
height: max-content;
height: min-content;
height: fit-content(20em);
height: auto;

https://developer.mozilla.org/en-US/docs/Web/CSS/height

border

The border shorthand CSS property sets an element’s border. It sets the values of border-width, border-style, and border-color.

/* style */
border: solid;

/* width | style */
border: 2px dotted;

/* style | color */
border: outset #f33;

/* width | style | color */
border: medium dashed green;

https://developer.mozilla.org/en-US/docs/Web/CSS/border

padding

The padding CSS shorthand property sets the padding area on all four sides of an element at once.

/* Apply to all four sides */
padding: 1em;

/* vertical | horizontal */
padding: 5% 10%;

/* top | horizontal | bottom */
padding: 1em 2em 2em;

/* top | right | bottom | left */
padding: 5px 1em 0 2em;

https://developer.mozilla.org/en-US/docs/Web/CSS/padding

box-sizing

The box-sizing CSS property sets how the total width and height of an element are calculated.

box-sizing: border-box;
box-sizing: content-box;

• content-box gives you the default CSS box-sizing behavior. If you set an element’s width to 100 pixels, then the element’s content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px.
• border-box tells the browser to account for any border and padding in the values you specify for an element’s width and height. If you set an element’s width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Border box, literamente nos dice que el width y height de la caja será tomado desde el borde de la misma, incluyendo padding y border 😀

Margin: Es un espacio externo al cuerpo

Border: La linea que define a los elementos (por default viene transparente)

Padding: Es un espacio interno del cuerpo, nos ayuda para posicionar el contenido de la caja (texto, imagenes)

Contenido:texto,imagenes

Width: El tamaño de la caja, tamaño del contenido

High: El alto de la caja

Se pueden posicionar con las 4 direcciones (top, button, left, right)

🦄IMPORTANTE✨

box-sizing: border-box;

Esta propiedad de css nos ayuda a hacer un cálculo automático del width de una caja, es decir, va a sumar el border y el padding al width de la caja para que esta no modifique su tamaño.

• Ejemplo: una caja tiene:

div {
	box-sizing: border-box;
	padding: 5px;
	border: 2px;
	width: 20px;
}

En este caso el ancho del div sería 20px. Pero la propiedad del width disminuye su valor para dar paso al padding y al border, es decir, el width en realidad pasaría a valer 13px. Con eso nos evitamos tener que calcular manualmente de la siguiente manera.

div {
	padding: 5px;
	border: 2px;
	width: 13px;
}

Ahora ya me quedo super claro el box-sizing

Todo esta ahí pero no se ve… todo es transparente al final

Acá les comparto mi código CSS, yo octube el resultado esperado por si alguien necesita un punto de reerencia:

*{ box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}
main{
    width: 100%;
    height: 500px;
    border: 10px solid cadetblue;
    padding: 20px 35px;
}

Este es el html si lo quieren examinar a fondo:

<!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>Document</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <main>
        <section>
            <h1>Soy el titulo</h1>
            <div>
                 <p>Soy el parrafo</p>
            </div>
        </section>
    </main>
</body>
</html>

Lo del estilo al selector universal con box sizing y margin y padding cero, no lo he visto incluso en webs bastante importantes (cuando hago clones html para pentesting phishing).

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

*
{
    box-sizing: border-box; 
    /* quitar scroll--esto suma el padding con el width del elemento */ 
    /* el navegador hace un calculo automatico, del tamaño del width le resto el padding y el border
     para que no se salga del navegador */
    /* calcula automaticamente el tamaño del elemento con ep padding y el border */
    /* si agrego margin si se suma */
    /* Recomendación , todo lo del elemento universal hay que ponerlo siempre en todas las hoja de estilo,para reiniciar el marging, padding y ponerle el box-sizzing
    debe ser siempre el codigo cuando inicio un estilo*/

    padding: 0;
    margin: 0;
}

https://developer.mozilla.org/es/docs/Web/CSS/box-sizing

Oh ok, creo que ya entiendo: entonces el width hace referencia al contenido del elemento HTML y no al elemento HTML completo.

Más de 1 hemos visto lo útiles que son las sugerencias y autocompletados en VS Code, sobretodo a la hora de deasarrollar.
Es decir, si quieres un border, no escribas toda la plabra, escribe un poco de ella y luego presiona CTRL + barra espaciadora, eso te abria las sugerencias.

(Ojo, así funciona en WIndows y Linux, no sé como sea en Mac) .
Happy Coding!

Básicamente, la mayoría de etiquetas HTML son cajas y estas se toman estilos que les da por defecto el navegador y toman el tamaño de acuerdo a su contenido

Notas

*{
    /*Evita el scroll, suma padding, margin y border al width del elemento*/
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
main{
    width: 100%; /*Medida del ancho*/
    height: 500px; /*Medida de lo largo*/
    border: 10px solid green; /*Border tamagno - tipo - color*/
    padding: 20px 35px; /*Espacio del contenido hacia adentro*/

    /*El margin, padding y border se le suma al width, por ende puede que salga un scroll bar*/
}