Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
En este artículo, veremos los márgenes uniformes de Primer CSS . La utilidad de margen proporcionada por Primer CSS ayuda a los desarrolladores a escribir menos CSS personalizado y ayuda a lograr muchos diseños de página diferentes usando los mismos estilos. Las utilidades de margen uniforme se utilizan para aplicar el mismo margen a todos los lados de un elemento. Las utilidades de margen uniforme anulan los márgenes predeterminados y se pueden utilizar con una escala de espaciado de 0 a 6.
Primer CSS Márgenes uniformes Clases:
- m-0: esta clase se utiliza para restablecer cualquier margen predeterminado en un elemento.
- m-1: Esta clase se utiliza para establecer el margen de la escala 1 en todos los lados de un elemento.
- m-2: Esta clase se utiliza para establecer el margen de la escala 2 en todos los lados de un elemento.
- m-3: Esta clase se utiliza para establecer el margen de la escala 3 en todos los lados de un elemento.
- m-4: Esta clase se utiliza para establecer el margen de la escala 4 en todos los lados de un elemento.
- m-5: Esta clase se utiliza para establecer el margen de la escala 5 en todos los lados de un elemento.
- m-6: Esta clase se utiliza para establecer el margen de la escala 6 en todos los lados de un elemento.
Sintaxis:
<div class="m-3"> ... </div>
Ejemplo 1: El siguiente ejemplo muestra el uso de las clases de margen uniforme enumeradas anteriormente.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Uniform Margin - Primer CSS</title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@19.8.2/dist/primer.css" />
<style>
.d-flex>div{
/* Margin to provide spacing between the div elements */
margin-top: 20px;
}
</style>
</head>
<body>
<div class="text-center">
<h2 class="color-fg-success">GeeksforGeeks</h2>
<h4>Primer CSS - Uniform Margin</h4>
</div>
<div class="d-flex flex-justify-around flex-items-center flex-column">
<div class="color-bg-closed-emphasis">
<div class="color-bg-danger m-6">
m-6
</div>
</div>
<div class="color-bg-closed-emphasis">
<div class="color-bg-danger m-5">
m-5
</div>
</div>
<div class="color-bg-closed-emphasis">
<div class="color-bg-danger m-4">
m-4
</div>
</div>
<div class="color-bg-closed-emphasis">
<div class="color-bg-danger m-3">
m-3
</div>
</div>
<div class="color-bg-closed-emphasis">
<div class="color-bg-danger m-2">
m-2
</div>
</div>
<div class="color-bg-closed-emphasis">
<div class="color-bg-danger m-1">
m-1
</div>
</div>
<div class="color-bg-closed-emphasis">
<div class="color-bg-danger m-0">
m-0
</div>
</div>
</div>
</body>
</html>
Producción:
Primer CSS Márgenes uniformes
Ejemplo 2: El siguiente ejemplo muestra cómo el uso de clases de margen uniforme anula el margen predeterminado o preaplicado en el elemento.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Uniform Margin - Primer CSS</title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@19.8.2/dist/primer.css" />
<style>
.d-flex>p{
margin-top: 30px;
}
.gfg {
margin: 100px;
}
</style>
</head>
<body>
<div class="text-center">
<h2 class="color-fg-success">GeeksforGeeks</h2>
<h4>Primer CSS - Uniform Margin</h4>
</div>
<div class="mt-3 d-flex flex-justify-around
flex-items-center flex-column">
<p><b>Element without uniform margin class:</b></p>
<div class="color-bg-closed-emphasis">
<div class="gfg color-bg-danger">
m-6
</div>
</div>
<p><b>Element with uniform margin class:</b></p>
<div class="color-bg-closed-emphasis">
<!-- The "m-6" class here will override
the default or pre-applied margin on
the element -->
<div class="gfg color-bg-danger m-6">
m-6
</div>
</div>
</div>
</body>
</html>
Producción:
Primer CSS Márgenes uniformes
Referencia: https://primer.style/css/utilities/margin#uniform-margins