Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.
CSS: propiedades de margen
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada lucro Con sintaxis y ejemplos.
describir
Las propiedades de margen de CSS definen los márgenes en todos los lados de un elemento.
sintaxis
Las propiedades de margen de CSS se pueden representar mediante uno, dos, tres o cuatro de los valores proporcionados. Cada valor se puede expresar como un valor fijo o como un porcentaje.
un valor
La sintaxis de la propiedad de margen CSS (valor 1) es:
margin: all;Cuando se proporciona un valor, el valor del margen se aplicará a los cuatro lados del elemento (es decir, arriba, derecha, abajo, izquierda).
dos valores
La sintaxis de la propiedad de margen CSS (con 2 valores) es:
margin: top_bottom left_right;Cuando se proporcionan dos valores, el primer valor se aplicará a la parte superior e inferior del elemento. El segundo valor se aplicará a los lados izquierdo y derecho del elemento.
tres valores
La sintaxis para la propiedad de margen CSS (con 3 valores) es:
margin: top right_left bottom;Cuando se proporcionan tres valores, el primer valor se aplicará a la parte superior del elemento. El segundo valor se aplicará a la derecha ya la izquierda del elemento. El tercer valor se aplicará a la parte inferior del elemento.
cuatro valores
La sintaxis de la propiedad de margen CSS (con 4 valores) es:
margin: top right bottom left;Cuando se proporcionan cuatro valores, el primer valor se aplicará a la parte superior del elemento. El segundo valor se aplicará al lado derecho del elemento. El tercer valor se aplicará a la parte inferior del elemento. El cuarto valor se aplicará al lado izquierdo del elemento.
Los valores de los márgenes superior, derecho, inferior e izquierdo pueden ser uno de los siguientes:
| valor | describir |
|---|---|
| estable | valor fijo en px, em, … div { márgenes: 5px; } div { márgenes: 4em 5px; } div {márgenes: 2px 5px 10px; } div {márgenes: 4px 5px 2px 3px; } |
| porcentaje | valor porcentual div { margen: 8%; } div { margen: 4% 5%; } div { margen: 2% 5% 8%; } div { margen: 4% 5% 2% 3%; } |
| fijo y porcentaje (conjunto) |
Una combinación de valores fijos y porcentuales div { margen: 4% 5px; } div { margen: 2em 5% 8px; } div { márgenes: 4px 5em 2% 3px; } |
| carro | para centrar bloques div {márgenes: 0 automático;} div { margen: 4% automático; } |
| heredar | El elemento heredará los márgenes de su elemento principal div {márgenes: heredar;} |
notas
- Cada valor en las propiedades de margen de CSS se puede expresar como un valor fijo o como un porcentaje.
- Puede combinar valores fijos y porcentuales en las propiedades de margen de CSS.
- Se permiten valores negativos en las propiedades de margen de CSS.
- Cuando el valor se proporciona como un porcentaje, es relativo al ancho del bloque que lo contiene.
- Véase también margen superior, margen inferior, margen izquierdo y margen derecho.
Compatibilidad del navegador
Las propiedades de margen CSS tienen soporte básico para los siguientes navegadores:
- Aleación de cromo
- androide
- Firefox (Geco)
- Firefox móvil (Geco)
- Navegador de Internet (IE)
- es decir, móvil
- ópera
- Ópera Móvil
- Safari (WebKit)
- Safari para móvil
ejemplo
Discutiremos la propiedad de margen a continuación, explorando ejemplos de cómo esta propiedad se puede usar en CSS con 1, 2, 3 o 4 valores (ya sea como un valor fijo o como un porcentaje).
usar valor fijo
Veamos un ejemplo de márgenes CSS donde proporcionamos un valor expresado como un valor fijo.
div { margin: 10px; }En este ejemplo de margen CSS, proporcionamos un valor de 10 px, que se aplicará a los 4 lados del elemento.
Veamos cómo usar el valor automático opcional en las propiedades de margen de CSS.
div { margin: 0 auto; }En este ejemplo de margen CSS, vamos a
A continuación, veremos un ejemplo de margen de CSS en el que proporcionamos dos valores expresados como valores fijos.
div { margin: 10px 5em; }En este ejemplo de margen CSS, proporcionamos dos valores. El primer valor de 10px se aplicará a la parte superior e inferior del elemento. El segundo valor, 5em, se aplicará a los lados izquierdo y derecho del elemento.
A continuación, veremos un ejemplo de margen de CSS en el que proporcionamos tres valores expresados como valores fijos.
div { margin: 2px 4px 6px; }En este ejemplo de margen CSS, proporcionamos tres valores. El primer valor de 2px se aplicará a la parte superior del elemento. El segundo valor de 4px se aplicará a los lados derecho e izquierdo del elemento. Se aplicará un tercer valor de 6px en la parte inferior del elemento.
A continuación, veremos un ejemplo de margen de CSS en el que proporcionamos cuatro valores expresados como valores fijos.
div { margin: 5px 10px 12px 8px; }En este ejemplo de margen CSS, proporcionamos cuatro valores. El primer valor de 5px se aplicará a la parte superior del elemento. El segundo valor de 10px se aplicará al lado derecho del elemento. Se aplicará un tercer valor de 12 px en la parte inferior del elemento. Se aplicará un cuarto valor de 8px al lado izquierdo del elemento.
porcentaje de uso
Veamos un ejemplo de márgenes CSS donde proporcionamos un valor expresado como porcentaje.
div { margin: 4%; }En este ejemplo de margen CSS, proporcionamos un valor del 4 %, que se aplicará a los 4 lados del elemento.
Veamos cómo usar el valor automático opcional en las propiedades de margen de CSS.
div { margin: 4% auto; }En este ejemplo de margen CSS, vamos a
A continuación, veremos un ejemplo de margen de CSS en el que proporcionamos dos valores expresados como porcentajes.
div { margin: 10% 5%; }En este ejemplo de margen CSS, proporcionamos dos valores. El primer valor del 10 % se aplicará a la parte superior e inferior del elemento. Se aplicará un segundo valor del 5% a los lados izquierdo y derecho del elemento.
A continuación, veremos un ejemplo de margen de CSS en el que proporcionamos tres valores expresados como porcentajes.
div { margin: 2% 5% 10%; }En este ejemplo de margen CSS, proporcionamos tres valores. El primer valor del 2% se aplicará a la parte superior del elemento. El segundo valor del 5% se aplicará a los lados derecho e izquierdo del elemento. Se aplicará un tercer valor del 10 % en la parte inferior del elemento.
A continuación, veremos un ejemplo de margen de CSS en el que proporcionamos cuatro valores expresados como porcentajes.
div { margin: 5% 10% 2% 8%; }En este ejemplo de margen CSS, proporcionamos cuatro valores. El primer valor del 5% se aplicará a la parte superior del elemento. El segundo valor del 10 % se aplicará al lado derecho del elemento. Se aplicará un tercer valor del 2% en la parte inferior del elemento. Se aplicará un cuarto valor del 8% al lado izquierdo del elemento.