Modelo de Caja en CSS: Margen, Relleno y Bordes
Contenido del curso
Alejandro Ramos
Danilo Fernandez
Russell Sotomayor
María José Ledesma
Juan Christopher
Jimmy Buriticá Londoño
David Flores
ProfesorJimmy Buriticá Londoño
Marco Antonio Andrade Lazarte
Miguel Angel Reyes Moreno
Julián Ramírez
Joel Dominguez Merino
Sebastian Valencia Zapata
Hector Castillo
emanuel
Jhanpiere Montes
Sebastian Cifuentes
Natalia Molina
Joel Dominguez Merino
Diego Alejandro Pinto Moreno
Sura Naileth Cedeño Lopez
Team PlatziJoel Dominguez Merino
Jorge Arroyo
Yair Lira
Sebastian Ignacio Infante Contreras
MICHAEL ALEXIS OLIVERA PRADO
Iris Valentina Barrios
Ramón Ruiz
Iris Valentina Barrios
Anderson Josué Oroya Silva
Ruben Vivas
Quetzal Mendoza
Alejandra Hincapie
Joshua Ortiz Rosales
Luis Lira
Mauricio Moreno Morales
Obed Paz
Delaney David Sarmiento Hernández
Cristian Ramos
Diego Suarez
Carlos Rodrigo Ayala Alvarado
Alejandro Guerrero Rivera
Carlos Ramos
Sandra Cecilia Trujillo Vargas
Alexandra Tchernaia
Jesus Velasco
Erick Fernando Guzmán Valerio
Cristian Iñiguez
Gran aporte. Gracias.
Gracias por el aporte, esto es algo que me cuesta entender todavía.
Tremendo.
Quedo super.
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
Buen aporte.
Excelente aporte, gracias
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.
¡Gracias! :D
Es mejor practica usar normalice que usar el ' * ' en cada proyecto? Cual seria la diferencia?
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:
Buena explicación
buen aporte!
Las imágenes:
Gracias
Gracias por las imagenes!
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
!Imagen
una buena explicacion, me ayudaste a entender la funcion de margin y padding
Esa propiedad de box-sizing:border-box, es lo máximo. aplíquenla por defecto. Y luego si no lo necesitan la sobreescriben.
La había visto y jamas la había entendido. Diego la explico muy bien!
¿Cuál sería la ventaja de hacer eso? Estoy aprendiendo e intentando comprender al cien esta clase...
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
Excelente ! gracias por compartir los link. Siempre e tenido problemas con los nombres de variables, clases e id jajaja
Se ve interesante los videos, pero me aburrí al minuto 5.
Geniales apuntes!
Gracias! :)
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 🤓
experimentando un poco.
muy ordenado, genial!
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).
.box { box-sizing: border-box; }
solo confirmenme el MODELO DE CAJA contiene el MARGIN PADDING Y EL BORDE???
Sí, son las dimensiones del elemento, margin, padding y border :)
Así es, se vería así
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:
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 💚
x2, hasta se me olvida el pomodoro jaja
es un quebradero de cabeza esta clase, el modelo de cajas es lo que menos me gusta y lo que menos entiendo de css
también, no entiendo nada toca buscar algún tutorial
igual
Clase 25 - Modelo de caja
¿Qué forma tienen los elementos HTML cuando son renderizados?
¿Cómo se le llama a los estilos que se les puede agregar a las cajas que conforman los elementos de HTML?
¿Cuáles son los estilos que podemos aplicar al modelo de caja?
¿Qué es margin en el modelo de caja?
¿De qué color es el margin de un elemento HTML?
¿Qué es el border en el modelo de caja?
¿Qué aspectos modificar del border en CSS?
¿Cuál es el color por defecto del border de un elemento?
¿Qué es el padding en el modelo de caja?
¿Para qué podemos usar el padding?
¿Qué otro nombre podemos usar para referirnos al padding?
¿Qué es el content en el modelo de caja?
¿Qué es el width y el haight del content en el modelo de caja?
¿Qué posiciones podemos dar a un elemento con CSS?
¿De qué color es el color de fondo por defecto de un elemento HTML?
¿Los elementos HTML tienen una imagen de fondo por defecto?
¿Para qué nos sirve la propiedad width?
¿Para qué nos sirve la propiedad height?
¿Para qué nos sirve la propiedad border?
¿Qué aspectos podemos modificar del borde de un elemento con la ayuda de la propiedad border?
¿Qué resultado obtenemos con la declaración border: 10px solid grey?
¿Para qué nos sirve la propiedad padding?
¿Cómo es la distribución del padding en un elemento HTML si a la propiedad padding le damos dos valores?
¿Cómo es la distribución del padding en un elemento HTML si a la propiedad padding solo le damos un valor?
¿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?
¿Qué propiedades determinan el tamaño total de un elemento HTML?
¿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?
¿Cuál es el selector universal?
Para qué nos sirve el selector universal?
¿Cómo podemos resetear los estilos que asignan los navegadores a los elementos HTML?
* { padding: 0; margin: 0; }
¿Para qué nos sirve la declaración box-sizing: border-box?
box-sizing: border-box;
Gracias por compartir tu resumen. ¡Me han servido mucho!
Siempre comienza tu css con
*{ box-sizing: border-box; padding: 0; margin: 0; }
de hecho es una mala practica quitarle el padding y margin a todos los elementos
Usa Normalize!
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:
margin: 0 SOLO en el body.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 que es una hoja de estilos que elimina algunos margins y padding que pueden ser molestos, dejando los que si sirven.