Propiedad de margen en CSS explicada

Los márgenes son los espacios que se crean (para una mejor estética) alrededor de cualquier elemento. El margen se establece automáticamente por el navegador que se utiliza. Sin embargo, los márgenes definidos por el usuario se pueden crear utilizando la propiedad de margen CSS. Los márgenes tienen cuatro lados (generalmente depende del elemento), y el margen de cada lado se puede configurar utilizando la propiedad de margen.

La propiedad de margen permite establecer los márgenes en los lados individualmente o uno puede crear márgenes para múltiples lados simultáneamente. En esta guía descriptiva, se explica la propiedad de margen en CSS y tiene los siguientes resultados de aprendizaje.

• Trabajo de propiedad de margen en CSS
• Trabajo de la propiedad de margen taquigrafía
• Uso de la propiedad de margen con ejemplos

Cómo funciona la propiedad de margen en CSS

La propiedad de margen en CSS puede funcionar en diversas circunstancias en las que debe dar márgenes a los lados (individualmente) o dar márgenes utilizando propiedades en taquigrafía (múltiples lados a la vez). El trabajo en ambas situaciones se discute aquí.

El margen se puede dar a los lados individuales utilizando la sintaxis en consecuencia.

selector margen-top: value; // en el lado superior
selector margen-bottom: valor; // en la parte inferior
selector margen-izquierda: valor; // en el lado izquierdo
selector margen-right: valor; // en el lado derecho

El selector puede ser cualquier elemento, mientras que el valor es el número utilizado para dar un límite de margen específico. El valor se puede usar con varias unidades de medición i.mi., Auto, longitud (PX, CM, PT), porcentaje (%) y heredado (según la clase principal). El PX es la medición absoluta, mientras que el EM, REM y el porcentaje son las medidas relativas y son mejores (en comparación con PX) adecuados para resultados receptivos.

Además de los márgenes del lado individual, la propiedad de margen taquigrafía también se puede usar para dar los márgenes a varios lados simultáneamente. La sintaxis de la propiedad de margen taquigrafía se proporciona a continuación:

selector margen: value1 value2 value3 value;

El valor1, el valor2, el valor3 y el valor4 representan los lados superior, derecha, inferior e izquierdo de un elemento.

Cómo usar la propiedad de margen en CSS

Esta sección proporciona algunos ejemplos que muestran el uso de la propiedad de margen en CSS.

Ejemplo 1: Dar márgenes a lados individuales
En este ejemplo, el código escrito a continuación se usa para dar márgenes a los lados individuales.

Propiedad de margen en CSS

Uso de margen a la derecha de 5px
Usando el fondo de margen de 5px
Usando el margen superior de 5px
Usando margen izquierda de 5px

La descripción del código se proporciona a continuación

• Un estilo CSS para Div se define dando ancho, propiedad flotante y borde
• Se crean cuatro clases de CSS llamada "Top", "Rig", "Bot" y "Lef" que contiene el margen (5px) en cada clase
• Estas cuatro clases se usan dentro de las divisiones (div)

La imagen del código se muestra a continuación

Producción:

Ejemplo 2: Dar márgenes a varios lados simultáneamente
El ejemplo anterior proporcionó los márgenes a los lados individuales. El siguiente código da margen a varios lados simultáneamente

Propiedad de margen en CSS

Usando un margen del 5% en todos los lados
Usar el margen del 5% en la parte superior/inferior y 10% a la izquierda/derecha
Usando un margen de 2 y 3EM a arriba e inferior y 4EM a la derecha/izquierda
Usando un margen de 2,4,6,8 píxeles en la parte superior, derecha, abajo, a la izquierda respectivamente

El código anterior se describe como

• Se crean cuatro clases de CSS llamada "Sing", "Doub", "Trip" y "All"
• La clase "Sin" da margen de% a todos los lados y la clase "Dum" da un margen de 5% a la parte superior/inferior y 10% a la derecha/izquierda
• La clase de "viaje" da un margen de 2EM y 4EM para superar un fondo y 3EM a los lados derecho/izquierdo
• La clase "All" da un margen de 2, 4, 6 y 8px a los lados de arriba, derecha, inferior e izquierda

La imagen del código se muestra a continuación

Producción:

De los ejemplos anteriores, habría aprendido la aplicabilidad de la propiedad de margen en los siguientes contextos:

• Aplicar la propiedad de margen a todos los lados individualmente
• Dar márgenes usando la propiedad de margen taquigrafía

Conclusión

La propiedad de margen en CSS se practica dando márgenes de acuerdo con las propiedades definidas por el usuario. Este artículo demuestra el trabajo y el uso de la propiedad de margen en CSS. La propiedad de margen en CSS se puede usar para dar márgenes a cada lado individualmente y la propiedad de margen taquigrafía se puede usar para dar márgenes a varios lados simultáneamente.