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 Negative Margins . En esto, podemos agregar márgenes negativos en la parte superior, derecha, inferior o izquierda de un elemento simplemente al incluir una utilidad de margen negativo. Para usar esta utilidad, usamos una fórmula:
m[direction]-n[spacer]
Aquí, el espaciador va de 1 a 6 . Para agregar capacidad de respuesta, use la siguiente fórmula:
m[direction]-[breakpoint]-n[spacer]
Primer CSS Márgenes negativos clase utilizada:
- m[dirección]-n[espaciador]: esta clase se utiliza para proporcionar un margen negativo en las cuatro direcciones, es decir, arriba, derecha, abajo e izquierda.
- m[dirección]-[punto de interrupción]-n[espaciador]: esta clase se utiliza para proporcionar un margen negativo con puntos de interrupción adicionales para la capacidad de respuesta.
Sintaxis:
<div class="d-flex flex-justify-center">
<div class="color-bg-attention">
<div class="m-3 ml-n4 ml-md-n6 border-left
color-border-success color-bg-subtle p-2">
.m-4 .ml-n5 .ml-md-n6
</div>
</div>
</div>
Ejemplo 1: El siguiente ejemplo muestra un margen negativo.
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 Negative Margin</h2> </div> <div class="d-flex flex-justify-center"> <div class="color-bg-success"> <div class="m-4 ml-n5 ml-md-n6 border-left color-border-accent-emphasis color-bg-success-emphasis p-2"> .m-3 .ml-n4 .ml-md-n6 </div> </div> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra un margen negativo de respuesta.
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 Negative Margin</h2> </div> <div class="m-4 color-bg-success d-inline-block"> <div class="mx-sm-2 mx-md-4 color-bg-success-emphasis p-1"> .mx-sm-4 .mx-md-6 </div> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/margin#negative-margins
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA