Propiedad de margen CSS
Ejemplo
Establezca el margen de los cuatro lados de un elemento <p> en 35 píxeles:
p {
margin: 35px;
}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La marginpropiedad establece los márgenes de un elemento y es una propiedad abreviada para las siguientes propiedades:
Si la propiedad margin tiene cuatro valores:
- margen: 10px 5px 15px 20px;
- margen superior es 10px
- margen derecho es 5px
- margen inferior es 15px
- margen izquierdo es 20px
Si la propiedad margin tiene tres valores:
- margen: 10px 5px 15px;
- margen superior es 10px
- los márgenes derecho e izquierdo son 5px
- margen inferior es 15px
Si la propiedad margin tiene dos valores:
- margen: 10px 5px;
- los márgenes superior e inferior son 10px
- los márgenes derecho e izquierdo son 5px
Si la propiedad de margen tiene un valor:
- margen: 10px;
- los cuatro márgenes son 10px
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.margin="100px 50px" |
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 | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
Sintaxis CSS
margin: length|auto|initial|inherit;
Valores de propiedad
| Value | Description | Play it |
|---|---|---|
| length | Specifies a margin in px, pt, cm, etc. Default value is 0. Negative values are allowed. Read about length units | |
| % | Specifies a margin in percent of the width of the containing element | |
| auto | The browser calculates a 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
Establezca el margen de un elemento <p> en 35 píxeles para la parte superior e inferior y en 70 píxeles para la derecha y la izquierda:
p {
margin: 35px 70px;
}
Ejemplo
Establezca el margen de un elemento <p> en 35 píxeles para la parte superior, 70 píxeles para la derecha y la izquierda y 50 píxeles para la parte inferior:
p {
margin: 35px 70px 50px;
}
Ejemplo
Establezca el margen para un elemento <p> en 35 píxeles para la parte superior, 70 píxeles para la derecha, 50 píxeles para la parte inferior y 90 píxeles para la izquierda:
p {
margin: 35px 70px 50px 90px;
}
páginas relacionadas
Tutorial CSS: Margen CSS
Tutorial de CSS: modelo de caja CSS
Referencia HTML DOM: propiedad de margen