Cuándo usar margen vs relleno en CSS
Esta publicación describe:
- Cuándo utilizar el "relleno" frente al "margen" en CSS?
- Cómo utilizar el "margen" en CSS?
- Cómo utilizar el "relleno" en CSS?
Cuándo utilizar el "relleno" frente al "margen" en CSS?
CSS "margen" y "relleno"Las propiedades se utilizan para diseñar la interfaz. También se utilizan para especificar la brecha adicional o el espacio entre los elementos. Sin embargo, estas dos propiedades difieren entre sí en términos de funcionalidad.
Aquí, explicaremos algunas distinciones entre ambas propiedades:
| margen | relleno |
|---|---|
| El margen proporciona espacio fuera del elemento. | El relleno proporciona espacio dentro del contenido del elemento. |
| Podemos establecer un margen de elemento como "auto"Para configurar automáticamente el margen alrededor del elemento. | El relleno no se puede configurar como auto. El usuario debe especificar los valores para establecer el espacio dentro del elemento. |
| El margen no ha afectado el estilo de un elemento. | Cuando aplicamos el color de fondo al elemento, afectará el estilo de un elemento. |
| Podemos establecer valores positivos y negativos como márgenes. | El relleno solo admite valores positivos. |
Cómo utilizar el "margen" en CSS?
Para utilizar el "margen"Propiedad, primero, crea un""Contenedor y asignar la clase. Por ejemplo, hemos asignado una clase llamada "Linuxhint". Luego, incruste algún texto en una etiqueta de párrafo " Linuxhint es uno de los mejores sitios web de tutoriales El resultado del código mencionado anteriormente se menciona a continuación: Ahora, crea otro ""Container que tiene la clase"margen-divir"Y aplica el"estilo"Atributo como"Border: 1px Solid Black". Después de eso, agregue algún texto en el " Linuxhint es uno de los mejores sitios web de tutoriales. Producción Ahora, aplique la propiedad "Margen" en ".Clase de margen-div ”: En el código anterior, el ".margen-divir"Se utiliza para acceder al elemento DIV para aplicar propiedades por debajo de la lista: Aquí, puedes ver que hemos establecido con éxito el "margen"Propiedad en el segundo"div" elemento: Cómo utilizar el "relleno" en CSS? Para usar la propiedad de "relleno", se han utilizado los ejemplos mencionados anteriormente. En el segundo "div"Contenedor, use la clase"almohadilla"Para aplicar el relleno: Linuxhint es uno de los mejores sitios web de tutoriales Linuxhint es uno de los mejores sitios web de tutoriales. Producción Para aplicar el acolchado y otras propiedades CSS en el ".almohadilla"Clase, eche un vistazo al código proporcionado: En el código mencionado anteriormente, accedimos al segundo "div"Elemento usando clase".almohadilla". Hemos establecido el "color de fondo" y el "tamaño de la fuente". Además, el "relleno"La propiedad se usa para agregar espacio alrededor del contenido del elemento desde cada lado como"50px". Producción Hemos explicado las diferencias y usos de "relleno" y "margen" en CSS. Conclusión El CSS "margen"Se utiliza para establecer el espacio alrededor del elemento, mientras que el"relleno"Se usa para agregar espaciado alrededor del contenido del elemento. Para aplicar la propiedad de margen o acolchado, primero, cree un "div"Contenedor, y especifique la clase. Después de eso, acceda a la clase por nombre de clase y aplique el "margen" y "relleno" propiedades. Esta publicación ha explicado el uso de margen versus acolchado en CSS.
Color de fondo: RGB (199, 238, 205);
tamaño de fuente: medio;
borde: 3px RGB (114, 250, 114);
Margen: 100px 100px 100px 100px;
Color de fondo: RGB (199, 238, 205);
tamaño de fuente: medio;
relleno: 50px 50px 50px 50px;