Primer CSS es una biblioteca CSS rica en componentes de código abierto que ayuda a los desarrolladores a desarrollar sitios web hermosos y receptivos que funcionan en dispositivos de cualquier tamaño de pantalla. Tiene una amplia gama de componentes que satisface la necesidad de cualquier sitio web.
En este artículo, veremos Primer CSS Reset Margins . Las Clases de Restablecimiento de Margen se utilizan para establecer los márgenes en cualquier elemento a cero. El uso de clases de margen de restablecimiento anulará cualquier margen predeterminado en el elemento.
Primer CSS Restablecer clases de márgenes:
- m-0: esta clase se utiliza para restablecer el margen en los cuatro lados a cero.
- mt-0: esta clase se utiliza para restablecer el margen en la parte superior del elemento a cero.
- mr-0: esta clase se utiliza para restablecer el margen a la derecha del elemento a cero.
- mb-0: esta clase se utiliza para restablecer el margen en la parte inferior del elemento a cero.
- ml-0: esta clase se utiliza para restablecer el margen a la izquierda del elemento a cero.
- mx-0: esta clase se utiliza para restablecer el margen horizontal del elemento a cero.
- my-0: esta clase se utiliza para restablecer el margen vertical del elemento a cero.
Sintaxis:
<div class="mt-0"> ... </div>
Ejemplo 1: El siguiente ejemplo muestra el uso de las clases m-0 , mt-0 , mr-0 , ml-0 y mb-0 para restablecer los márgenes de un elemento.
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>Reset Margins - Primer CSS</title>
<link href=
"https://unpkg.com/@primer/css@19.8.2/dist/primer.css"
rel="stylesheet" />
<style>
/* Margin to provide spacing between
the div elements */
.d-flex > div {
margin-top: 20px;
}
/* All the inner div elements will have
the default margin of 20px */
/* This will be overridden by the
reset margin classes */
.inner {
margin: 20px;
}
</style>
</head>
<body>
<div class="text-center">
<h2 class="color-fg-success">
GeeksforGeeks
</h2>
<h4>Primer CSS - Reset Margins</h4>
</div>
<div class="d-flex flex-justify-around
flex-items-center flex-column">
<div class="color-bg-closed-emphasis">
<div class="inner color-bg-danger m-0">
m-0
</div>
</div>
<div class="color-bg-closed-emphasis">
<div class="inner color-bg-danger mt-0">
mt-0
</div>
</div>
<div class="color-bg-closed-emphasis">
<div class="inner color-bg-danger mr-0">
mr-0
</div>
</div>
<div class="color-bg-closed-emphasis">
<div class="inner color-bg-danger mb-0">
mb-0
</div>
</div>
<div class="color-bg-closed-emphasis">
<div class="inner color-bg-danger ml-0">
ml-0
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra cómo usar las clases mx-0 y my-0 para restablecer el margen en las direcciones horizontal y vertical respectivamente.
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>Reset Margins - Primer CSS</title>
<link href=
"https://unpkg.com/@primer/css@19.8.2/dist/primer.css"
rel="stylesheet" />
<style>
/* Margin to provide spacing
between the div elements */
.d-flex > div {
margin-top: 20px;
}
/* The inner div elements will have
the default margin of 20px */
/* This will be overridden by the
reset margin classes */
.inner {
margin: 20px;
}
</style>
</head>
<body>
<div class="text-center">
<h2 class="color-fg-success">
GeeksforGeeks
</h2>
<h4>Primer CSS - Reset Margins</h4>
</div>
<div class="d-flex flex-justify-around
flex-items-center flex-column">
<div class="color-bg-closed-emphasis">
<!-- The "mx-0" class will set the margins in
the horizontal direction to zero -->
<div class="inner color-bg-danger mx-0">
mx-0
</div>
</div>
<div class="color-bg-closed-emphasis">
<!-- The "my-0" class will set the margins in
the vertical direction to zero -->
<div class="inner color-bg-danger my-0">
my-0
</div>
</div>
</div>
</body>
</html>
Producción:
Referencia: https://primer.style/css/utilities/margin#reset-margins