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, aprenderemos sobre los márgenes verticales extendidos de Primer CSS. Los márgenes verticales extendidos de Primer CSS se utilizan para proporcionar márgenes verticales extendidos en la parte superior e inferior de un elemento.
Márgenes verticales extendidos Clase utilizada:
- m[dirección]-[espaciador]: esta clase se utiliza para proporcionar un margen vertical extendido en una dirección particular.
Sintaxis:
<div class="m[direction]-[spacer]">
Content
</div>
Los márgenes verticales extendidos también se pueden usar de manera receptiva en función de los puntos de interrupción.
La sintaxis para márgenes verticales extendidos sensibles:
<div class="m[direction]-[breakpoint]-[spacer]" >
Content
</div>
- [dirección] : este valor puede ser
- t: Indica márgenes superiores
- b: Indica márgenes inferiores
- y: Indica tanto arriba como abajo
- [punto de interrupción]: este valor se puede utilizar para representar
- SM: Dispositivos pequeños
- md: Dispositivos medianos
- lg: dispositivos grandes
- xl: dispositivos extragrandes
- [spacer]: Este valor varía de 7 a 12 lo que indica cuánto margen queremos.
- 7: proporciona un margen de 48 px
- 8: proporciona un margen de 64 px
- 9: proporciona un margen de 80 px
- 10: proporciona un margen de 96 px
- 11: proporciona un margen de 112 px
- 12: proporciona un margen de 128 px
Ejemplo 1: En este ejemplo, mostraremos márgenes verticales extendidos en la dirección inferior.
HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content= "width = device-width, initial-scale = 1"> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@16.3.0/dist/primer.css"> </head> <body style="padding:4%;"> <h1 style="color:green"> GeeksforGeeks </h1> <h3>Primer CSS Extended Vertical Margins</h3> <br><br> Hi Geek!! <div class="color-bg-success" style="padding:1%;width:50%"> <div class="mb-9 color-bg-danger "> GeeksforGeeks Bottom Extended Vertical Margin </div> </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, mostraremos márgenes verticales extendidos en la dirección superior.
HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content= "width = device-width, initial-scale = 1"> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@16.3.0/dist/primer.css"> </head> <body style="padding:4%;"> <h1 style="color:green">GeeksforGeeks</h1> <h3>Primer CSS Extended Vertical Margins</h3> <br><br> Hi Geek!! <div class="color-bg-success" style="padding:1%;width:50%"> <div class="mt-9 color-bg-danger "> GeeksforGeeks Top Extended Vertical Margin </div> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/margin#extended-vertical-margins
Publicación traducida automáticamente
Artículo escrito por nikitamehrotra99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA