Propiedad de margen inferior de CSS
Ejemplo
Establezca el margen inferior de un elemento <p> en 25 píxeles:
p.ex1 {
margin-bottom: 25px;
}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La margin-bottom
propiedad establece el margen inferior de un elemento.
Nota: Se permiten valores negativos.
Valor por defecto: | 0 |
---|---|
Heredado: | No |
Animable: | si, ver propiedades individuales . Leer sobre animable |
Versión: | CSS1 |
Sintaxis de JavaScript: | objeto .style.marginBottom="100px" |
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Property | |||||
---|---|---|---|---|---|
margin-bottom | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
Sintaxis CSS
margin-bottom: length|auto|initial|inherit;
Valores de propiedad
Value | Description | Play it |
---|---|---|
length | Specifies a fixed bottom margin in px, cm, em, etc. Default value is 0. Negative values are allowed. Read about length units | |
% | Specifies a bottom margin in percent of the width of the containing element | |
auto | The browser calculates a bottom margin | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Colapso de margen
Los márgenes superior e inferior de los elementos a veces se contraen en un solo margen que es igual al mayor de los dos márgenes.
¡Esto no sucede en los márgenes horizontales (izquierdo y derecho)! ¡Solo márgenes verticales (superior e inferior)!
Mira el siguiente ejemplo:
Ejemplo
p.a {
margin: 30px 0;
}
p.b {
margin: 20px 0;
}
En el ejemplo anterior, el elemento <p class="a"> tiene un margen superior e inferior de 30 px. El elemento <p class="b"> tiene un margen superior e inferior de 20px.
Esto significa que el margen vertical entre <p class="a"> y <p class="b"> debe ser de 50 px (30 px + 20 px). ¡Pero debido al colapso del margen, el margen real termina siendo 30px!
Más ejemplos
Ejemplo
Establece el margen inferior para un elemento <p> al 10% del ancho del contenedor:
p.ex1 {
margin-bottom: 10%;
}
Ejemplo
Establezca el margen inferior para un elemento <p> en 2 em:
p.ex1 {
margin-bottom: 2em;
}
páginas relacionadas
Tutorial CSS: Margen CSS
Referencia HTML DOM: propiedad marginBottom