texto - que es margin y padding en css
Cómo recordar en CSS que el margen está fuera del borde, y el relleno dentro (15)
Cree usted mismo 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 agregarlo 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 sean intuitivas.
No edito CSS muy a menudo, y casi siempre necesito buscar en Google el modelo de caja CSS para verificar si el padding está dentro del margin y el margin afuera, o viceversa. (Acabo de volver a verificarlo y el padding está dentro).
¿Alguien tiene una buena manera de recordar esto? Un poco de nemotécnica, una buena explicación de por qué los nombres son así ...
Cuando trabajas con CSS finalmente te vuelves loco, la celda acolchada en la que te pondrán tiene el relleno en el interior de las paredes.
Imprima el diagrama desde la sección Dimensiones de caja de la especificación y colóquelo en la pared.
Lo aprendí 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 el body no rompe visiblemente el modelo.
Realmente, si le das al body un margen y un fondo, deberías verlo rodeado por una franja blanca. Sin embargo, este no es el caso: el relleno del body es el mismo que el margen. Esto establece algunas cosas incorrectas sobre el modelo de caja.
Normalmente lo pienso así:
- margen = espacio alrededor de la caja;
- borde = el borde de la caja;
- relleno = espacio dentro de la caja.
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 trabajes en CSS lo suficiente, se convertirá en algo natural recordar esto.
pin - P está en
usa firebug para ayudarte a ver.
Agregar borde, incluso solo de forma temporal. A medida que juegas con los números, verás la diferencia.
De hecho, las fronteras temporales alrededor de los elementos son una forma útil de trabajar, de modo que puede ver por qué los flotadores están cayendo, etc.
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.
Sé que esta es una respuesta a su pregunta, pero más de un consejo. 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.
Tim Saunders dio algunos consejos excelentes: cuando comencé con CSS, me propuse construir 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 los problemas de mi propio modelo de caja, comencé a usar ''Mo Pi''. Como en, "No soy lo suficientemente gordo, tengo que comer mo pi". Extraño, pero funcionó para mí. Por supuesto, aumenté 20 libras mientras aprendía CSS ... ;-)
PAdding es una parte de la PINTURA de un elemento: extiende 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 el margen 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.
El relleno generalmente se usa adentro. 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.
Margen: cuando quieras mover el bloque. Relleno: cuando desee mover los elementos dentro de un bloque.
