Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Modelo de caja

13/23
Recursos

Aportes 49

Preguntas 13

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

El modelo de caja también podemos verlo como los ogros… ¡Capas! ¡Los ogros tiene capas!
.

.
Esto es un tema muy mindblow 🤯. Básicamente porque todo en HTML son cajitas, sí, incluso un texto es una caja. Cuando tú insertas un texto, lo que estás haciendo es que estás insertando una cajita que adentro tiene texto (y lo mismo aplica para cualquier etiqueta). Esta cajita tiene un fondo transparente, pero si tú le pones cualquier fondo usando la propiedad background podrás ver esa cajita. Esta cajita, además de su contenido, tiene estas 3 capas externas que serían el padding, el border y el margin 👇:
.

  • padding: Es básicamente el espaciado que hay entre la caja y el contenido de la caja, es un espaciado interno. Lo solemos usar mucho para permitir que los elementos “respiren”, por ejemplo, aquí les dejo una comparación de un botón sin padding y uno con padding 👇
    .

    .
  • border: Es el delineado que le podemos dar a una caja, y un borde puede ser tan grueso como quieras. Simplemente debemos ponerle el grosor, el tipo de borde y el color del borde, por ejemplo, podemos hacer una caja con bordes y líneas intermitentes OwO:
    .
<div class="box">
    <p>Arrastra una imagen</p>
</div>

.

.box {

    border: 4px dashed dodgerblue;

    display: flex;
    justify-content: center;
    align-items: center;
    ;

    width: 500px;
    height: 200px;
    color: dodgerblue;
    font-weight: bold;

}

.

.
Nota como en este caso lo combiné incluso con Flexblox 7u7.
.

  • margin: Este es básicamente el espaciado entre elementos. Es la distancia que podemos dejar de un elemento hacia otro.
    .
    Con estas capitas podemos conformar el modelo de caja 😄.

.
Y para resumir la propiedad box-sizing: border-box; es sencilla: si pones esta propiedad, ekl tamaño final de tu caja va a ser del width que tú le pongas, si no la pones, eol tamaño final de tui caja va a ser del width que tú le pongas más el tamaño de tu padding, más el de tu borde má el de tu margin UwU.
.
Y de ahora en adelante cuando empieces a desarrollar, notarás que muchos usan esto en CSS 👇:
.

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

.
Básicamente usan el selector universal para aplicarle a toooooodas las etiquetas estas propiedades (es decir, resetean estas propiedades, porque por defecto, el navegador le pone ciertos estilos 😄), pero tú ahora ya sabes cómo funcionan 👀.

CSS Box Model
El tamaño de lo que se muestra en pantalla estará delimitado por 4 cosas: tamaño de contenido, tamaño de relleno (padding), tamaño del borde y el tamaño del margen.

Les comparto mis apuntes del curso definitivo de HTML y CSS.
Clase:

  • Modelo de caja

Estilos del modelo de caja

Margin

El estilo de margin puede ser un espacio externo de la caja hacia el exterior, es un espacio.

Es un espacio externo del elemento, es como decir la distancia que hay de tu cuerpo hasta tu pantalla o pared que tengas al frente.

Border

El borde puede estar o no.

Es la o las líneas que bordea un elemento por defecto viene transparente pero nosotros podemos agregarle color y un grosos.

Padding

Es distinto al margin, ya que el padding no es un espacio externo, sino que es un espacio interno, de la caja hacia adentro.

Nos ayuda a posicionar el contenido de la caja.

Contenido

Puede ser cualquier cosa que sea visible, ya sea un texto, imágenes, videos, etc.

Dentro de este también tenemos

Width

Es lo largo o ancho que va a generar que tiene la caja contenedora o el contenido.

Height

Es el alto que tiene o que queremos que tenga el contenido.

Con esto todo esto podemos jugar con las dimensiones de las etiquetas o del contenido de las mismas.

Position

También tenemos el position del contenido, que de acuerdo a este podemos jugar con sus posiciones top, right, borrom, left, se lo puede posicionar en cualquiera de estos.

Desglosando el modelo de caja

Si vemos más a profundidad el modelo de caja vemos que

Margin

Este viene por default es transparente, no se va a ver.

Color del fondo

Viene por default transparente, se lo puede cambiar si se desea.

Imagen de fondo

No viene una imagen de fondo, eso se rellena con el contenido como texto, imágenes, etc.

Relleno

Es el padding que es transparente.

Borde

Como lo dijimos este también es transparente, y si deseamos le podemos agregar un color y un ancho.

Contenido

Son las imágenes, videos, texto o cualquier cosa que podamos ver.

Padding

Podemos agregar padding de esta forma, donde el primer espacio corresponde al padding de arriba y abajo, el segundo espacio corresponde a los de la derecha e izquierda.

Con esto somos específico el tipo de padding queremos agregar.

También tenemos propiedades más específicas como ser top, bottom, left y right que solo agregan estilos en esas partes.

selector {
	padding: arriba-abajo derecha-izquierda;
	padding-top: valor;
}

main {
	padding: 20px 10px;
}

Buenas prácticas

Es una buena práctica resetear las propiedades que el navegador implementa por defecto, lo hacemos con el selector universal *.

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

Box-sizing: border-box

Con esta propiedad y este valor podemos hace un cálculo automático para que el padding y border no se salgan de las dimensiones que queremos para nuestro elemento.

En palabras sencillas mete todo para adentro y realiza el cálculo hacia dentro en vez de sumar espacio al contenido hacia afuera. Lo que hace es restarlo, quitándole espacio al contenido, para que no tengamos problemas con las dimensiones.

Todo esto solo sucede con el padding y con el border, al margin no lo va a recalcular, el margin si crece hacia el exterior.



Notas de la clase

Con la propiedad box-sizing: border-box; css busca que todo el elemento mida lo que indicamos en width y height, esto con ayuda del padding y el border, de tal manera que se le resta espacio al content para poder lograr las dimensiones específicadas.

Como tip, para comentar en el codigo en windows podemos usar ALT+SHIFT+A 😃

El Box-sizing solo aplicaria al padding y border. Como el Margin es fuera de la caja no lo considera para restar…

El modelo de caja es la manera en que se representan todos los elementos html en una página. Cada elemento genera una caja, el comportamiento de esa caja depende de su clasificación: si es de línea o de bloque.

A todas las cajas se les puede aplicar las siguientes propiedades: width, height, padding, margin, border, background. Lo particular de este concepto es que por defecto el width se refiere al ancho del contenido de un elemento (no al ancho total, de borde a borde).

Les dejo un artículo buenísimo sobre Box Model, a mí me encanta, está super didáctico y bien explicado! 💖
https://dev.to/lupitacode/que-es-el-box-model-4mnj

Ohh! Que interesante lo del box sizing: border-box. No lo había comprendido tan bien hasta ahora!

Algunas etiquetas
box sizing: border box→ Hace que el contenido entre en la caja, en el ancho y largo que se puso, haciendo que el padding y el border tambièn se incluyan

border:1px, solid, hotpink →Pide tres valores el tamaño en pixeles(1px), tipo de border (solid), color (hotpink)

margin → Es la separación entre los elementos

Holaa a todos les quiero compartir una herramienta que encontre para ver el medelo de caja en 3D 😲 hasta ahora unicamente sé que la tiene el navegador Edge de Microsoft.

Les dejo un gif de como se ve mi página 😃

Espero les dé curiosidad 😄

El modelo de caja es muy importante comprenderlo y tenerlo claro, ya que en los navegadores, todo se hace a partir de cajas.🟩

Hay una extensión para Chrome que me gusta mucho para ver estos detalles los elementos HTML en nuestro sitio web, se llama Pesticide:

https://chrome.google.com/webstore/detail/pesticide-for-chrome/bakpbgckdnepkmkeaiomhmfcnejndkbi

Aquí están mis apuntes de la clase en PDF, tomados en Notion:
https://drive.google.com/file/d/13izd_xrZ2juuNTrqkV9f_ZVdHi153yK9/view?usp=sharing

😮 no sabía lo del border-box

Notes:

  • La representacion de nuestras etiquetas en el navegador son cajas
  • Todas las cajas de nuestro navegador tienen las siguientes propiedades:
    • margin
    • padding
    • border
    • content → es a este a quien le podemos colocar width y height
  • En las devTools de los navegadores podemos encontrar hasta el final de la seccion de estilos una representacion de este modelo de caja
  • El padding es una medida “interna” de la caja y no se relaciona con otros elementos
  • La propiedad box-sizing: border-box nos permite que el width de un elemento se calcule sumando tanto el padding como el contenido. De esta manera nuestro elemento respetara la dimension que definimos
  • El margin es quien nos da la separacion entre nuestros diferentes elementos.
  • Las margenes de CSS de manera vertical tienden a colapsarse

Todo lo que está en la web son cajitas. (=

Puedo decir que este curso ha sido de mucho probecho de esta manera, habia realizado el anterior con el que me quedaron muchas inquietudes y este sin duda las a respondido al maximo. Adicional a esto me parece increible el manual elaborado por la profesora, para el recorrido de este curso.

es una buena colocar el box-sizing: boreder-box; en el selector de todos los ítems: ( * { })

Interesante la utilidad de border-sizing

Tener buenas bases del modelo de caja nos ahorra mucho tiempo al momento de dar estilos, la profesora explica todo muy bien!

El padding es super importante para mejorar la experiencia de usuario con los enlaces y otros elementos donde uno desee cambiar un color con hover, o elementos cliqueables.

Si le agregamos padding a un elemento <a></> haremos que el area donde cambia el cursor de normal a pointer sea mas grande, y por ende podrán cliquear sin estar completamente por encima del elemento.

El modelo de caja
El modelo de caja podemos verlo como una representación de cajas con nuestro código HTML, esas etiquetas que envuelven cada contendido, y cada una de estas cajas podemos interpretarlas con diferente tipo de visualización, por ejemplo:

  • De tipo bloque (block)
  • De tipo línea (line)
    .
    Estos dos tipos de caja (block e inline), tienen características, se refieren al modo como se comporta la caja en términos de flujo de páginas y en relación con otras cajas de la página.
    .
    Comprender estas cajas es clave para poder crear diseños con CSS o para alinear elementos con otros elementos.

Propiedad del box-sizing : border-box (permite dejar el tamaño por defecto que ya teníamos y que al agregar el padding no le agregue adicional si no que se ajusta dentro del width).

Muy buena clase, gracias profe

Este curso definitivamente es mucho más comprensible al anterior, lo he disfrutado 😃

Buena explicacion la del border box Stefany 👍

el margen en horizontal de dos elementos contiguos se mezclan, solapan

Protip

Si quieres evitar hacer cálculos al momento de usar width, height y padding, utiliza:

box-sizing: border-box

Con esto, el padding se aplicará dentro de los width y height que estableciste,

Esta profesora me gusta porque tiene un modo diferente de explicar las cosas y me ha ayudado a tener la mente mas abierta a estos temas

box-sizing: border-box; busca que todo el elemento mida lo que indicamos en width y height, de manera que el contenido de la caja se ajusta a ese tamaño incluyendo el padding y el marging

profe felicitaciones explica muy bien y lo mejor no hace copy paste explicando, como otrosss

Modelo de caja

Las propiedades width y height definen el tamaño del contenido de la caja. El padding y el border se sumarán a las dimensiones explícitas que establezcamos. Es decir, si tenemos una caja que mida width: 200px; con un padding: 5px; y un border: 1px; el tamaño final de nuestra caja quedaría de 212px (1+5+200+5+1)

El valor por default de box-sizing es content-box

La propiedad box-sizing con el valor border-box obliga a que el ancho real de nuestra caja sea de 200px, incluidos padding y border.

Que interesante! ahora me quedo super mas claro para que servia el box-sizing, ya que con el profe Diego se me hizo ambiguo, a pesar de que la mayoría de conceptos ya los tengo siempre hay algo nuevo para entender o reforzar

al fin pude entender el border box

Siempre me costo un poco entender eso del margin, border, padding, nunca le hallaba la forma 😅. Ahora lo entendí todo😊

También se pueden poner las propiedades de border en una sola línea:

border: 3px red solid;

Donde 3px es el tamaño, red el color (también se puede poner en rgb, rgba o hex) y solid el tipo de línea (solid, dashed y dotted).

<!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>
    <style>
        header{
            display: block;
            background-color: violet;
            width: 550px;
            height: 130px;
            margin: auto; /** Es la parte exterior del recuadro, es el margen que tiene el objeto con
                            respecto a otros elementos. **/
            box-sizing: border-box; /** Sirve para que todos los elementos sumen 
                                    el tamaño seleccionado (550px*100px) y no que 
                                    se sumen dando como resultado un tamaño mayor. **/

            border: 2px solid red; /** Border recibe como parametros (Npx[por cada lado], 
                                    el tipo de borde y el color del borde) **/
            
            padding: 5px; /** Es un espacio entre los elementos, este se muestra dentro del recuadro **/
        }
        header h1{
            text-align: center;
        }
        header h2{
            text-align: center;
        }
    </style>
</head>
<body>
    <header>    
        <h1>Modelo de Caja</h1>
        <h2>Box-Model</h2>
    </header>
</body>
</html>

Margin
Border
Padding
Content

por si no entendieron como se usa box-sizing: border-box;
pading y border se acoplaran al tamaño de la caja div por ejemplo si tienes

width: 100px;
height: 100px;
padding: 20px;
border: 2px solid #ff2;
box-sizing: border-box;

se restara del tamaño de width y height te quedara 56px
se resta el doble del valor que estes asignando porque lo asignas en area

Box-sizing posee dos valores
Content-box por defecto
Padding-box todo el elemento mida lo que indicamos en width y height, incluido padding y border

**Propiedades para modificar Border **
Border-style Especifica el tipo de borde
Border-width Especifica el ancho del borde.
Border-color Especifica el color
Border Especifica ancho tipo color
Border-radius Especificar bordes redondeados

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="Description" content="Extended Description">
        <meta name="robots" content="index,follow">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Modelo de Caja</title>
        <style>
            div {
                background-color: plum;
                width: 200px;
                height: 200px;
                padding: 20px;
                /* Sin box-sizing: border-box =>`width = content` */
                /* Con box-sizing: border-box =>`width = content + padding + border` */
                box-sizing: border-box;
                border: 10px solid hotpink;
                /* Los márgenes en vertical hace que colapsen en más de un box y no se suman */
                margin: 20px;
            }
        </style>
    </head>
    <body>
        <div>
            Platzi
        </div>
        <div>
            Es lo máximo
        </div>
    </body>
</html>