Los márgenes se utilizan para crear espacios alrededor de los elementos, fuera de los bordes definidos.
Márgenes CSS
Las propiedades margin se utilizan para crear espacios alrededor de los elementos, fuera de los bordes definidos.
Con CSS, tienes control total sobre los márgenes. Hay propiedades para establecer el margen de cada lado de un elemento (top, right, bottom y left).
Margen - Lados individuales
CSS tiene propiedades para especificar el margen de cada lado de un elemento:
margin-topmargin-rightmargin-bottommargin-left
Todas las propiedades margin pueden tener los siguientes valores:
auto- el navegador calcula el margenlongitud - especifica un margen en
px,pt,cm,etc.%- especifica un margen en%del ancho del elemento contenedorheredado - especifica que el margen debe ser heredado del elemento padre
Tip: Los valores negativos están permitidos.
Ejemplo:
Establezca diferentes márgenes para los cuatro lados de un elemento <p>:
Margen - Propiedad abreviada
Para reducir el código, es posible especificar todas las propiedades de margen en una propiedad.
La propiedad margin es una propiedad abreviada para las siguientes propiedades de margen individuales:
margin-topmargin-rightmargin-bottommargin-left
Pues así es como funciona:
Si la propiedad margin tiene cuatro valores:
margin: 25px 50px 75px 100px;margen superior es
25pxmargen derecho es
50pxmargen inferior es
75pxmargen izquierdo es
100px
Ejemplo:
Utilice la propiedad abreviada margin con cuatro valores:
p {
margin: 25px 50px 75px 100px;
}
Si la propiedad margin tiene tres valores:
margin: 25px 50px 75px;margen superior será
25pxmárgenes derecho e izquierdo serán
50pxmargen inferior será
75px
Ejemplo:
Utilice la propiedad abreviada margin con tres valores:
p {
margin: 25px 50px 75px;
}
Si la propiedad margin tiene dos valores:
margin: 25px 50px;márgenes superior e inferior serán
25pxmárgenes derecho e izquierdo serán
50px
Ejemplo:
Utilice la propiedad abreviada margin con dos valores:
p {
margin: 25px 50px;
}
Si la propiedad margin tiene un solo valor:
margin: 25px;- todos los márgenes serán
25px
- todos los márgenes serán
Ejemplo:
Utilice la propiedad abreviada margin con un solo valor:
p {
margin: 25px;
}
El valor auto
Puedes establecer el margen con el valor auto para centrar horizontalmente el elemento dentro de su contenedor.
El elemento ocupará el ancho especificado y el espacio restante se dividirá en partes iguales entre los márgenes izquierdo y derecho.
Ejemplo:
Utilice margin: auto
El valor inherit
Este ejemplo permite que el margen izquierdo del elemento <p class="ex1"> se herede del elemento principal (<div>):
Ejemplo:
Uso del valor heredado:
Todas las propiedades de margen CSS
| Propiedad | Descripción |
margin | Una propiedad abreviada para establecer todas las propiedades de margen en una declaración. |
margin-bottom | Establece el margen inferior de un elemento. |
margin-left | Establece el margen izquierdo de un elemento. |
margin-right | Establece el margen derecho de un elemento. |
margin-top | Establece el margen superior de un elemento. |
Resumen
Las propiedades margin de CSS se utilizan para crear espacios alrededor de los elementos. Se pueden establecer márgenes para cada lado del elemento y se pueden abreviar en una propiedad. Los valores pueden ser auto, una longitud, un porcentaje o heredados. El valor auto se puede utilizar para centrar horizontalmente un elemento. La propiedad margin también tiene propiedades individuales para cada lado.
Traducido con 💚 desde W3Schools.com