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