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 negativos extendidos de Primer CSS. Los márgenes negativos extendidos de Primer CSS se utilizan para proporcionar márgenes negativos extendidos en la parte superior e inferior de un elemento y su rango es de 1 a 12.
Márgenes negativos extendidos Clase utilizada:
- m[dirección]-n[espaciador]: esta clase se utiliza para proporcionar un margen negativo extendido en una dirección particular.
Sintaxis:
<div class="m[direction]-n[spacer]">
Content
</div>
Los márgenes negativos también se pueden usar de manera receptiva en función de los puntos de interrupción.
Sintaxis:
<div class="m[direction]-[breakpoint]-n[spacer]" >
Content
</div>
- [dirección]: este valor puede ser ;
- t: Indica márgenes superiores
- b: Indica márgenes inferiores
- [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 0 a 12 lo que indica cuánto margen queremos.
- 0: proporciona un margen de 0px
- 1: proporciona un margen de -4px
- 2: proporciona un margen de -8px
- 3: proporciona un margen de -16px
- 4: proporciona un margen de -24px
- 5: proporciona un margen de -32px
- 6: proporciona un margen de -40px
- 7: proporciona un margen de -48px
- 8: proporciona un margen de -64px
- 9; Proporciona margen de -80px
- 10: proporciona un margen de -96px
- 11: proporciona un margen de -112 px
- 12: proporciona un margen de -128 px
Ejemplo 1: En este ejemplo, mostraremos márgenes negativos 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 Negative Margins</h3> <br><br> Hi Geek!! <div class="color-bg-success" style="padding:1%;width:50%"> <div class="mb-n12 color-bg-danger "> GeeksforGeeks Bottom Extended Negative Margin </div> </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, mostraremos márgenes negativos 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 Negative Margins</h3> <br><br> Hi Geek!! <div class="color-bg-success" style="padding:1%;width:50%"> <div class="mt-n9 color-bg-danger "> GeeksforGeeks Top Extended Negative Margin </div> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/margin#extended-negative-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