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. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Se requieren márgenes para establecer la posición de cada etiqueta. Primer CSS tiene clases especiales definidas para aplicar direcciones adecuadas a los márgenes. Cada dirección tiene un nombre especial definido. Se puede aplicar con escala de 0 a 6.
Clases de margen direccional:
- mt-6: Para establecer el margen superior, usamos la clase «mt».
- mr-6: Para establecer el margen derecho, usamos la clase «mr».
- mb-6: Para establecer el margen inferior, usamos la clase «mb».
- ml-6: Para establecer el margen izquierdo, usamos la clase «ml».
- mx-6: use esta clase para establecer propiedades horizontales, izquierda y derecha.
- my-6: use esta clase para establecer propiedades verticales, superiores e inferiores.
Nota: En las clases anteriores, se utiliza la escala 6. El desarrollador puede escalar de 1 a 5 según las necesidades de la aplicación.
Veamos la aplicación de estas clases en los siguientes ejemplos.
Ejemplo 1: Este ejemplo demuestra los márgenes direccionales de Primer CSS en cuatro direcciones.
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Directional margins</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3><u>Primer CSS Directional margins</u></h3><br /> </div> <div class="d-flex flex-justify-center"> <div class="color-bg-subtle"> <div class="mt-6 color-bg-attention"> Margin top </div> </div> <div class="color-bg-subtle"> <div class="ml-6 color-bg-attention"> Margin left </div> </div> <div class="color-bg-subtle"> <div class="mr-6 color-bg-attention"> Margin right </div> </div> <div class="color-bg-subtle"> <div class="mb-6 color-bg-attention"> Margin bottom </div> </div> </div> </body> </html>
Producción:
Márgenes direccionales de Primer CSS
Ejemplo 2: Este ejemplo demuestra los márgenes direccionales de Primer CSS.
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Directional margins</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body style="margin:50px"> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3><u>Primer CSS Directional margins</u></h3><br /> </div> <div class="d-flex flex-justify-center"> <div class="color-bg-attention"> <div class="mt-6 mr-6 mb-6 ml-6 color-bg-subtle"> Centered Text </div> </div> </div> </body> </html>
Salida: El margen se aplica en las cuatro direcciones como se muestra en la imagen.
Margen direccional
Referencia: https://primer.style/css/utilities/margin#direction-margins
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA