CSS margin (margen exterior)

La propiedad CSS margin (margen exterior) define el espacio alrededor de un elemento.

margin

margin limpia el área del elemento circundante (marco exterior). margin no tiene color de fondo, es completamente transparente.

margin puede cambiar los márgenes superior, inferior, izquierdo y derecho de un elemento por separado, o cambiar todas las propiedades a la vez.

Valores posibles

Valor Descripción
auto Establece el margen del navegador.
El resultado dependerá del navegador.
length Define un margin fijo (usando píxeles, pt, em, etc.).
% Define un margen usando porcentajes.

Remarkmargin puede usar valores negativos para superponer contenido.

Margin - Propiedades de margen individual

En CSS, se pueden especificar diferentes márgenes para diferentes lados:

Ejemplo

margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;

Pruébelo »

Margin - Propiedad abreviada

Para acortar el código, es posible especificar todas las propiedades de margen en una sola propiedad margin. Esto se conoce como propiedad abreviada.

La propiedad abreviada para todas las propiedades de margen esmargin :

Ejemplo

margin:100px 50px;

Pruébelo »

La propiedad margin puede tener de uno a cuatro valores.

  • margin:25px 50px 75px 100px;
    • Margen superior de 25px
    • Margen derecho de 50px
    • Margen inferior de 75px
    • Margen izquierdo de 100px

  • margin:25px 50px 75px;
    • Margen superior de 25px
    • Márgenes izquierdo y derecho de 50px
    • Margen inferior de 75px

  • margin:25px 50px;
    • Márgenes superior e inferior de 25px
    • Márgenes izquierdo y derecho de 50px

  • margin:25px;
    • Los 4 márgenes son de 25px
Examples

Más ejemplos

El margen superior del texto se establece usando centímetros.
Este ejemplo demuestra cómo establecer el margin superior de un texto usando un valor en centímetros.

Establecer el margen inferior del texto usando valores porcentuales
Este ejemplo demuestra cómo establecer el margen inferior usando un valor porcentual, relativo al ancho del elemento contenedor.

Todas las propiedades de margen de CSS

Propiedad Descripción
margin Propiedad abreviada. Establece todas las propiedades de margen en una sola 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.
Otras extensiones