Cómo recordar en CSS que el margen está fuera del borde y el relleno d

Cómo recordar en CSS que el margen está fuera del borde y el relleno dentro

No edito CSS muy a menudo, y casi cada vez que necesito ir a google Modelo de cuadro CSS para verificar si padding está dentro de border y margin afuera, o viceversa. (Solo revisé nuevamente y padding está adentro).

¿Alguien tiene una buena manera de recordar esto? Un poco mnemotécnico, una buena explicación de por qué los nombres son así ...

Mostrar la mejor respuesta

pin - P está en

Imprima el diagrama desde la sección Dimensiones de la caja de la especificación, y colóquelo en la pared.

Para mí, "relleno" solo suena más interno que "margen". ¿Quizás ayudaría pensar en la página impresa? Los márgenes son áreas en el extremo exterior, generalmente, ni siquiera se puede imprimir en 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 trabaje en CSS lo suficiente, se convertirá en una segunda naturaleza recordar esto.

usa firebug para ayudarte a ver.

Cuando trabajar con CSS finalmente te vuelve loco, la celda acolchada en la que te colocarán tiene el relleno en el interior de las paredes.

La respuesta más creativa a una pregunta técnica que he visto en mi vida.

Lo acabo de aprender con el tiempo: el modelo de caja es bastante simple, pero la razón principal por la que las personas lo encuentran difícil es porque body no rompe visiblemente el modelo.

Realmente, si le da a body un margen y un fondo, debería verlo rodeado por una franja blanca. Sin embargo, este no es el caso: el relleno de body es el mismo que el margen. Esto establece algunas cosas incorrectas sobre el modelo de caja.

Normalmente lo pienso así:

  • margin = espaciado alrededor de la caja;
  • borde = el borde de la caja;
  • padding = espacio dentro de la caja.

La razón principal por la que es difícil es porque el "ancho" incluye los tamaños de borde y margen. OMI ie5 realmente tenía este derecho

Cree una hoja de estilo base comentada que pueda usar como plantilla cada vez que necesite crear un nuevo sitio o editar un sitio existente.

Puede agregarlo a medida que aumenta el conocimiento y aplicarlo a varios navegadores diferentes para ver cómo se comportan varias cosas.

También podrá agregar comentarios o ejemplos sobre otras cosas difíciles de recordar o cosas que son contra intuitivas.

Añadir borde, incluso solo temporalmente. A medida que juegues 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 puede ver por qué caen los flotadores, etc.

En lugar de usar bordes, me gusta usar el esquema CSS, el mismo concepto, pero no tiene ningún efecto en el diseño. Entonces, si tiene un div de 100% de ancho y agrega un borde, agregará una barra de desplazamiento horizontal en el navegador. "esquema" no tiene tal efecto!

Sé que esta es una respuesta a su pregunta, pero más que un consejo. Siempre que esté tratando con margen y relleno, agregaré un borde alrededor de la parte con la que está trabajando, luego, a partir de ahí, me mostrará la habitación con la que tengo que trabajar. Cuando estoy listo, elimino el borde.

Estás usando una caja. Si estuvieras poniendo algo en una caja, pondrías algo de relleno dentro para asegurarte de que no golpeara contra los lados. El margen sería lo otro.

Tim Saunders dio un excelente consejo: cuando comencé a usar CSS, me propuse construir una buena hoja de estilo de base completamente comentada. Esa hoja de estilo ha cambiado muchas veces y sigue siendo un recurso excelente.

Sin embargo, cuando me encontré con mis propios problemas de 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, aumenté veinte libras mientras aprendía CSS ... ;-)

PAdding es una PARTE de la pintura de un elemento: extiende el fondo del elemento . Tiene sentido pensar que un elemento de par + relleno comparte un fondo común. El relleno es análogo al lienzo de la pintura: cuanto más grande es el relleno, más grande es el lienzo y, por lo tanto, el fondo. Border (el marco de la pintura) iría alrededor de ese par. Y margen separará pinturas en la pared de la galería. Pensar en el concepto de fondo de objeto ayuda a unir el objeto par + relleno. Las explicaciones habituales de lo que hay dentro y fuera no se quedan en la memoria: después de un tiempo, todos vuelven a la confusión original. Recuerde también que los márgenes son verticalmente plegables y el relleno no lo es.

El relleno generalmente se usa en el interior. Ya sea en el interior de una pared o en una caja de entrega, eso es simple. Y si el relleno está adentro, entonces el margen está afuera. No debería ser demasiado difícil.

Margen: cuando quieras mover el bloque. Relleno: cuando desee mover los elementos dentro de un bloque.

En lugar de preguntar una y otra vez a google, solo usa la ventana del inspector. En esa pestaña de estilo y desplácese hacia abajo, puede ver así.

 ingrese la descripción de la imagen aquí