En este artículo, aprenderemos cómo funciona la propiedad automática en margin:0 auto en CSS. La propiedad margin se utiliza para establecer los márgenes de un elemento. La propiedad margin tiene cuatro valores margin-top, margin-right, margin-bottom y margin-left.
Sintaxis:
margin: top_margin right_margin bottom_margin left_margin; /* We can also use the shortened syntax of margin that takes only two parameters */ margin: top_and_bottom_margin left_and_right_margin;
Entonces, en margin: 0 auto , el margen superior/inferior es 0, y el margen izquierdo/derecho es automático, donde auto significa que el navegador establece automáticamente el margen izquierdo y derecho en función del contenedor, para centrar el elemento. El margen: 0 auto equivalente a:
margin-top:0; margin-bottom:0; margin-left:auto; margin-right:auto;
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.parent{
background-color: yellow;
/* It set top and bottom margin to 5% and, the left and right
are automatically set by browser */
margin: 5% auto;
}
.h1{
color: rgb(5, 138, 5);
font-size: 50px;
}
</style>
</head>
<body>
<div class="parent">
<h1 class="h1">GeeksforGeeks</h1>
</div>
</body>
</html>
Producción:
-
Antes del margen establecido:
-
Después del margen establecido:
Publicación traducida automáticamente
Artículo escrito por nikhilchhipa9 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA