CSS Margin Propiedades
Los CSS margin propiedades se utilizan para generar el espacio alrededor de los elementos.
Los margin propiedades determinan el tamaño del espacio en blanco fuera del borde.
Este elemento tiene un margin de 80px.
CSS Margins
Los CSS margin propiedades determinan el tamaño del espacio en blanco fuera del borde.
 | Nota: Los margins son completamente transparentes - y no puede tener un color de fondo! |
|---|
Con CSS, tiene un control total sobre los margins . Hay propiedades CSS para establecer el margin de cada lado de un elemento (arriba, derecha, abajo, e izquierda).
Margin - Lados individuales
CSS tiene propiedades para especificar el margin para cada lado de un elemento:
-
margin-top -
margin-right -
margin-bottom -
margin-left
Todos los margin propiedades pueden tener los siguientes valores:
- auto - el navegador calcula el margin
- longitud - especifica un margin en px, pt, cm , etc.
- % - Especifica un margin en% de la anchura del elemento que contiene
- heredarán - especifica que el margin debe ser heredado de elemento padre
| Nota: También es posible utilizar valores negativos para margins ;para solapar contenido. |
|---|
El ejemplo siguiente establece diferentes margins de los cuatro lados de un <p> elemento:
Ejemplo
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
} Inténtalo tú mismo " El siguiente ejemplo permite que la izquierda margin ser heredada de elemento padre:
Ejemplo
div.container {
border: 1px solid red;
margin-left: 100px;
}
p.one {
margin-left:
inherit;
} Inténtalo tú mismo " Margin - Abreviación de las propiedades
Para acortar el código, es posible especificar todos los margin propiedades en una propiedad.
El margin propiedad es una propiedad abreviada para los siguientes individuales margin propiedades:
-
margin-top -
margin-right -
margin-bottom -
margin-left
Así pues, aquí es cómo funciona:
Si el margin propiedad tiene cuatro valores:
- margin : 25px 50px 75px 100px;
- margen superior es 25px
- margen derecho es 50px
- margen inferior es 75 px
- margen izquierdo es de 100px
Si el margin propiedad tiene tres valores:
- margin : 25px 50px 75px;
- margen superior es 25px
- márgenes derecho e izquierdo son 50px
- margen inferior es 75 px
Si el margin propiedad tiene dos valores:
- margin : 25px 50px;
- márgenes superior e inferior son 25px
- márgenes derecho e izquierdo son 50px
Si el margin propiedad tiene un valor:
- margin : 25px;
- los cuatro márgenes son 25px
El uso del valor auto
Puede establecer el margin propiedad de auto para centrar horizontalmente el elemento en su contenedor.
El elemento tomará el ancho especificado, y el espacio restante será dividido en partes iguales entre los de izquierda y derecha margins :
Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4»
Todas las propiedades de los márgenes CSS
| Propiedad | Descripción |
|---|---|
| margin | Una propiedad abreviada para establecer los margin propiedades en una declaración |
| margin-bottom | Establece la parte inferior margin de un elemento |
| margin-left | Establece la izquierda margin de un elemento |
| margin-right | Establece el derecho margin de un elemento |
| margin-top | Establece la parte superior margin de un elemento |