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