Cómo recordar en CSS que está fuera del margen de la frontera, y el relleno en el interior

Question

no editar el código CSS muy a menudo, y casi cada vez que tengo que ir a google y el CSS box model para comprobar si está dentro de la paddingborder y margin fuera , o viceversa. (Acabo de volver a marcar y padding está adentro).

¿Alguien tiene una buena manera de recordar esto? Un poco mnemotécnica, una buena explicación de por qué los nombres son de esa forma redonda ...

Answer 1

Al trabajar con CSS finalmente te vuelves loco la celda acolchada que te pondrán tiene el relleno en el dentro de de las paredes.

Answer 2

pin - P está en

Answer 3

Imprimir el diagrama de la sección Box Dimensions de la especificación, y lo puso en la pared.

Answer 4

Para mí, "relleno" suena más interno que "margen". Tal vez pensar en la página impresa ayudaría? Los márgenes son áreas que están muy alejadas; en general, no se puede imprimir hasta el borde, son insignificantes. Dentro de esos márgenes, el contenido podría ser rellenado para proporcionar una barrera adicional entre el contenido y el margen?

Una vez que trabaje en CSS lo suficiente, se convertirá en algo natural recordar esto.

Answer 5

usa firebug para ayudarte a ver.

Answer 6

Acabo de aprenderlo con el tiempo: el modelo de caja es bastante simple, pero la razón principal por la que a las personas les resulta difícil es porque body no rompe visiblemente el modelo.

Realmente, si le das a body un margen y un fondo, deberías 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.

que suelo pensar en ello como esto:

• margen = separación alrededor de la caja;
• borde = el borde de la caja;
• relleno = espacio dentro de la caja.

Answer 7

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

Puede aumentar a medida que crece en 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.

Answer 8

Añadir borde, aunque solo sea temporalmente. A medida que juegas con los números, verás la diferencia.

De hecho, las fronteras temporales alrededor de elementos es una forma útil para trabajar, de manera que se puede ver por qué los flotadores están cayendo, etc.

Answer 9

Sé que esto es una respuesta a su pregunta, pero más de una punta.Cada vez que me ocupo de los márgenes y el relleno, agregaré un borde alrededor de la pieza con la que está trabajando, y a partir de ahí, me mostrará la habitación con la que tengo que trabajar. Cuando estoy listo, elimino el borde.

Answer 10

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 la otra cosa.

Answer 11

Tim Saunders brindó excelentes consejos: cuando comencé con CSS, me propuse crear una buena hoja de estilo base totalmente 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 soy lo suficientemente gordo, necesito comer mo pi". Extraño, pero funcionó para mí. Por supuesto, aumenté veinte libras mientras aprendía CSS ... ;-)

Answer 12

PAdding es un PArt de la PINTURA de un elemento: amplía el fondo del elemento. Tiene sentido pensar en un par elemento + relleno como compartir un fondo común. El acolchado 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. El borde (el marco de la pintura) se movería alrededor de ese par. Y margin separará las pinturas en la pared de la galería. Pensar en el concepto de fondo de objeto ayuda a unir el objeto par + el relleno. Las explicaciones habituales de lo que está adentro y lo que está afuera no se pegan a la memoria: después de un tiempo todo el mundo vuelve a la confusión original. Recuerde también que los márgenes son verticalmente plegables y el relleno no.

Answer 13

El relleno se usa generalmente 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á dentro, entonces el margen está afuera. No debería ser demasiado difícil.

Answer 14

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

Answer 15

En lugar de preguntar una y otra vez a google, solo tiene que usar la ventana del inspector. En esa pestaña de estilo y deslízate hacia abajo puedes verlo así.