Cómo recordar en CSS que el margen está fuera del borde y el relleno dentro
https://stackoverflow.com/questions/32668
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
No edito CSS muy a menudo y casi cada vez que necesito buscar en Google el modelo de caja CSS para comprobar si padding está dentro del border y margin afuera, o viceversa.(Revisé nuevamente y padding está dentro).
¿Alguien tiene una buena manera de recordar esto?Un poco de mnemotecnia, una buena explicación de por qué los nombres están así...
Solución
Cuando trabajar con CSS finalmente te vuelve loco, la celda acolchada en la que te colocarán tiene el relleno en el adentro de las paredes.
Otros consejos
pin - P está en
Estás usando una caja.Si estuvieras poniendo algo en una caja, pondrías algo de acolchado dentro para asegurarte de que no golpee los lados.Entonces el margen sería la otra cosa.
Imprime el diagrama del Dimensiones de la caja sección de las especificaciones y colóquelo en la pared.
Para mí, "relleno" suena más interno que "margen".¿Quizás sería útil pensar en la página impresa?Los márgenes son áreas en el extremo exterior; generalmente, ni siquiera se puede imprimir hasta el borde; no se pueden marcar.Dentro de esos márgenes, ¿el contenido podría rellenarse para proporcionar una barrera adicional entre el contenido y el margen?
Una vez que trabajes lo suficiente en CSS, recordar esto se convertirá en algo natural.
En el interior se suele utilizar acolchado.Ya sea en el interior de una pared o en una caja de entrega, es muy sencillo.Y si el relleno está adentro, entonces el margen está afuera.No debería ser demasiado difícil.
Lo aprendí con el tiempo: el modelo de caja es bastante simple, pero la razón principal por la que a la gente le resulta difícil es porque body No rompe visiblemente el modelo.
De verdad, si das body un margen y un fondo deberías verlo rodeado por una franja blanca.Sin embargo, este no es el caso - bodyEl relleno es el mismo que el margen.Esto establece algunas cosas incorrectas sobre el modelo de caja.
Normalmente lo pienso así:
- margen = espacio alrededor del cuadro;
- borde = el borde del cuadro;
- padding = espacio dentro de la caja.
Tim Saunders me dio un consejo excelente: cuando comencé con CSS, me propuse crear una hoja de estilo base buena y completamente comentada.Esa hoja de estilo ha cambiado muchas veces y sigue siendo un recurso fantástico.
Sin embargo, cuando me encontré con mis propios problemas con el modelo de caja, comencé a usar 'Mo Pi'.Como en: "No estoy lo suficientemente gordo, necesito comer mo pi". Extraño, pero funcionó para mí.Por supuesto, engordé nueve kilos mientras aprendía CSS...;-)
Usa Firebug para ayudarte a ver.
Cree usted mismo una hoja de estilo base comentada que pueda usar como plantilla siempre que necesite crear un sitio nuevo o editar un sitio existente.
Puede agregarlo a medida que adquiere conocimientos y aplicarlo a varios navegadores diferentes para ver cómo se comportan las distintas cosas.
También podrá agregar comentarios o ejemplos sobre otras cosas difíciles de recordar o que sean contrarias a la intuición.
Agregue un borde, aunque sea temporalmente.Mientras juegas con los números, verás la diferencia.
De hecho, los bordes temporales alrededor de los elementos son una forma útil de trabajar, de modo que puedas ver por qué los flotantes caen, etc.
Sé que esto es una respuesta a tu pregunta, pero más bien un consejo.Siempre que esté trabajando con márgenes y relleno, agregaré un borde alrededor de la parte con la que estás trabajando y luego, desde allí, me muestra el espacio con el que tengo que trabajar.Cuando estoy listo, elimino el borde.
PAdding es una PARTE del PAinting de un elemento:extiende el elemento fondo.Tiene sentido pensar que un par de elemento + relleno comparte un fondo común.El relleno es análogo al lienzo del cuadro:cuanto mayor sea el relleno, más grande será el lienzo y, por tanto, el fondo.El borde (el marco de la pintura) rodearía ese par.Y margen Separará cuadros en la pared de la galería.Pensar en el concepto de fondo del objeto ayuda a unir el par objeto+relleno.Las explicaciones habituales de lo que está dentro y lo que está fuera no se quedan en la memoria:Después de un tiempo, todo el mundo vuelve a la confusión original.Recuerde también que los márgenes se pueden contraer verticalmente y el relleno no.
En lugar de preguntar una y otra vez a Google, simplemente usa la ventana del inspector.En esa pestaña de estilo y desplácese hacia abajo podrá ver así.
Margen: Cuando quieras mover el bloque.Relleno:Cuando quieras mover los elementos dentro de un bloque.
