La propiedad margin-bottom de CSS se usa para especificar la cantidad de margen que se usará en la parte inferior de un elemento. El margen se puede establecer en términos de longitud o porcentaje.
Sintaxis:
margin-bottom: <length> | <percentage> | auto
Valores de propiedad :
- Longitud: este valor especifica la longitud del margen con un valor fijo. Este valor puede ser positivo, negativo o cero.
Ejemplo:
html
<!DOCTYPE html> <html> <head> <title>CSS margin-bottom</title> <style> div{ background-color: lightgreen; } </style> </head> <body> <h1 style="color: green">GeeksforGeeks</h1> <!-- margin-bottom for below div is set to 50px --> <div style="margin-bottom: 50px">Line One</div> <!-- margin-bottom for below div is set to 0px --> <div style="margin-bottom: 0px">Line Two</div> <div>Line Three</div> </body> </html>
Salida :
- Porcentaje: este valor especifica la cantidad de margen como un porcentaje relativo al ancho del elemento contenedor.
Ejemplo:
html
<!DOCTYPE html> <html> <head> <title>CSS margin-bottom</title> <style> h1 { color: green; } .larger { width: 300px; background-color: white; } .smaller { width: 100px; background-color: white; } div{ background-color: lightgreen; } </style> </head> <body> <h1>GeeksforGeeks</h1> <!-- margin-bottom is set to 10% with width of containing box set to 300px --> <div class="larger"> <div style="margin-bottom: 10%";>Line One</div> <div>Line Two</div> </div> <!-- margin-bottom is set to 10% with width of containing box set to 100px --> <div class="smaller"> <div style="margin-bottom: 10%;">Line One</div> <div>Line Two</div> </div> </body> </html>
Salida :
- automático: si el valor de esta propiedad se establece como «automático», el navegador calcula automáticamente un valor adecuado para el tamaño del margen.
Navegadores compatibles: los navegadores compatibles con la propiedad margin-bottom se enumeran a continuación:
- Google cromo 1
- Borde 12
- explorador de Internet 3
- Firefox 1
- Ópera 3.5
- Safari 1
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA