Primer margen CSS

Primer CSS es un marco CSS gratuito y de código abierto que se crea utilizando el sistema de diseño de GitHub para brindar soporte a la amplia gama de sitios web de GitHub. Ayuda a crear la base de los elementos de estilo básicos, como el espaciado, los componentes, la tipografía, el color, etc.

En este artículo, veremos sobre Primer CSS Margin . Un Margen permite a los usuarios reducir la cantidad de CSS personalizado que comparte las mismas propiedades y les permite lograr muchos diseños de página diferentes usando los mismos estilos. Podemos establecer diferentes márgenes para diferentes lados, es decir, para arriba, abajo, derecha e izquierda.

Márgenes básicos de CSS:

  • Convención de nomenclatura : como el margen tiene varias variaciones, para recordar todas las diferentes variaciones de nomenclatura, esta utilidad ayuda a los usuarios a recordar los nombres de los márgenes. Por ejemplo: m(margen), t(superior), x(horizontal, izquierda y derecha), 4(24px), etc.
  • Márgenes uniformes : esta utilidad se utiliza para aplicar márgenes iguales a todos los lados de un elemento.
  • Márgenes direccionales : esta utilidad se utiliza para aplicar márgenes a un lado individual o al eje X e Y de un elemento.
  • Márgenes verticales extendidos : esta utilidad se utiliza para proporcionar márgenes verticales extendidos en la parte superior e inferior de un elemento.
  • Centrar elementos : Esta utilidad se utiliza para centrar elementos de bloque con un ancho establecido.
  • Restablecer márgenes : esta utilidad se utiliza para establecer los márgenes en cualquier elemento a cero.
  • Márgenes de respuesta : esta utilidad se utiliza para proporcionar márgenes en una dirección y un punto de interrupción determinados.
  • Márgenes negativos : esta utilidad se utiliza para agregar márgenes negativos en la parte superior, derecha, inferior o izquierda de un elemento.
  • Márgenes negativos extendidos : esta utilidad se utiliza para proporcionar márgenes negativos extendidos en la parte superior e inferior de un artículo.

Sintaxis:

<div class="mt-3">
    Margin top of 3
</div>

Ejemplo 1: El siguiente ejemplo demuestra los márgenes uniformes.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0" />
    <title>Primer</title>
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
        rel="stylesheet"/>
</head>
<body>
    <div class="m-4">
        <h1 style="color: green">GeeksforGeeks</h1>
        <h2>Primer CSS Margin</h2>
    </div>
    <div class="d-flex flex-items-baseline flex-justify-around">
        <div class="color-bg-success">
            <div class="m-0 p-1 color-bg-success-emphasis">
                .m-0
            </div>
        </div>
        <div class="color-bg-success">
            <div class="m-1 p-1 color-bg-success-emphasis">
                .m-1
            </div>
        </div>
        <div class="color-bg-success">
            <div class="m-2 p-1 color-bg-success-emphasis">
                .m-2
            </div>
        </div>
        <div class="color-bg-success">
            <div class="m-3 p-1 color-bg-success-emphasis">
                .m-3
            </div>
        </div>
        <div class="color-bg-success">
            <div class="m-4 p-1 color-bg-success-emphasis">
                .m-4
            </div>
        </div>
        <div class="color-bg-success">
            <div class="m-5 p-1 color-bg-success-emphasis">
                .m-5
            </div>
        </div>
        <div class="color-bg-success">
            <div class="m-6 p-1 color-bg-success-emphasis">
                .m-6
            </div>
        </div>
    </div>
</body>
</html>

Producción:

 

Ejemplo 2: El siguiente ejemplo demuestra los márgenes direccionales.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
        rel="stylesheet" />
</head>
<body>
    <div class="m-4">
        <h1 style="color: green">GeeksforGeeks</h1>
        <h2>Primer CSS Margin</h2>
    </div>
    <div class="d-flex flex-items-baseline flex-justify-around">
        <div class="color-bg-success">
            <div class="mx-4 p-1 color-bg-success-emphasis">
                .mx-4
            </div>
        </div>
        <div class="color-bg-success">
            <div class="my-4 p-1 color-bg-success-emphasis">
                .my-4
            </div>
        </div>
        <div class="color-bg-success">
            <div class="mt-4 p-1 color-bg-success-emphasis">
                .mt-4
            </div>
        </div>
        <div class="color-bg-success">
            <div class="mb-4 p-1 color-bg-success-emphasis">
                .mb-4
            </div>
        </div>
        <div class="color-bg-success">
            <div class="ml-4 p-1 color-bg-success-emphasis">
                .ml-4
            </div>
        </div>
        <div class="color-bg-success">
            <div class="mr-4 p-1 color-bg-success-emphasis">
                .mr-4
            </div>
        </div>
    </div>
</body>
</html>

Producción:

 

Referencia: https://primer.style/css/utilities/margin

Publicación traducida automáticamente

Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *