Márgenes CSS
Los márgenes se utilizan para crear espacio alrededor de los elementos, fuera de los bordes definidos.
Márgenes CSS
Las propiedades CSS marginse utilizan para crear espacio 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 (superior, derecho, inferior e izquierdo).
Margen - Lados individuales
CSS tiene propiedades para especificar el margen de cada lado de un elemento:
margin-topmargin-rightmargin-bottommargin-left
Todas las propiedades de margen pueden tener los siguientes valores:
- auto - el navegador calcula el margen
- longitud : especifica un margen en px, pt, cm, etc.
- % - especifica un margen en % del ancho del elemento contenedor
- heredar: especifica que el margen debe heredarse del elemento principal
Sugerencia: se permiten valores negativos.
Ejemplo
Establezca diferentes márgenes para los cuatro lados de un elemento <p>:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Margen - Propiedad abreviada
Para acortar el código, es posible especificar todas las propiedades de margen en una propiedad.
La marginpropiedad es una propiedad abreviada para las siguientes propiedades de margen individuales:
margin-topmargin-rightmargin-bottommargin-left
Pues así es como funciona:
Si la marginpropiedad tiene cuatro valores:
- margen: 25px 50px 75px 100px;
- margen superior es 25px
- margen derecho es 50px
- margen inferior es 75px
- margen izquierdo es 100px
Ejemplo
Utilice la propiedad abreviada margin con cuatro valores:
p {
margin: 25px 50px 75px 100px;
}
Si la marginpropiedad tiene tres valores:
- margen: 25px 50px 75px;
- margen superior es 25px
- los márgenes derecho e izquierdo son 50px
- margen inferior es 75px
Ejemplo
Utilice la propiedad abreviada margin con tres valores:
p {
margin: 25px 50px 75px;
}
Si la marginpropiedad tiene dos valores:
- margen: 25px 50px;
- los márgenes superior e inferior son 25px
- los márgenes derecho e izquierdo son 50px
Ejemplo
Utilice la propiedad abreviada margin con dos valores:
p {
margin: 25px 50px;
}
Si la marginpropiedad tiene un valor:
- margen: 25px;
- los cuatro márgenes son 25px
Ejemplo
Utilice la propiedad abreviada margin con un valor:
p {
margin: 25px;
}
El valor automático
Puede establecer la propiedad de margen autopara centrar horizontalmente el elemento dentro de su contenedor.
Entonces, el elemento ocupará el ancho especificado y el espacio restante se dividirá en partes iguales entre los márgenes izquierdo y derecho.
Ejemplo
Usar margen: automático:
div {
width: 300px;
margin:
auto;
border: 1px solid red;
}
El valor heredado
Este ejemplo permite que el margen izquierdo del elemento <p class="ex1"> se herede del elemento principal (<div>):
Ejemplo
Uso del valor heredado:
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left:
inherit;
}