CSS Márgenes

Mantén distancia entre elementos utilizando márgenes alrededor de los mismos.


Márgenes con CSS

El margen es un espacio invisible alrededor del elemento, que le permite al mismo mantener distancia de otros elementos.

Modelo de cajas

Las propiedades de los margenes margin nos permiten definir el ancho de los mismos.


El margen - margin

La propiedad margin se utiliza para definir el ancho del espacio que se encuentra entre el borde de un elemento y el elemento cercano a el.

Esta propiedad define el ancho del margen para los cuatro lados de la caja.

Sintaxis

<head>
<style="type:text/css">
selector {margin: valor}
</style>
</head>

Los posibles valores para definir el ancho de los márgenes

longitud | % | auto

Ejemplo

Vamos a ver como se comporta un texto con un margen de 30px alrededor.

Código
<head>
<style type="text/css">
p.margen{margin:30px}
</style>
</head>

<body>
<p>En este ejemplo podemos observar que el margen
aleja al elemento de los borde 30 pixels en base al
tamaño de la caja que lo contiene.</p>
</body>
Resultado

En este ejemplo podemos observar que el margen
aleja al elemento de los borde 30 pixels en base al tamaño de la
caja que lo contiene.


Los márgenes de un elemento por separado
margin-top, margin-right, margin-bottom, margin-left

Las propiedades margin-top, margin-right, margin-bottom, margin-left se utilizan para definir el ancho de los márgenes de cada uno de los lados del elemento por separado.
Puedes definir los 4 lados o solo aquellos que necesites.

Sintaxis

<head>
<style="type:text/css">
selector {
margin-top: valor
margin-right: valor
margin-bottom: valor
margin-left: valor
}
</style>
</head>

Los posibles valores para definir los anchos de margin

longitud | % | auto

Ejemplo

Vamos a definir el ancho de cada lado por separado.

Código
<head>
<style type="text/css">
p{
margin-top:5%
margin-right:30px
margin-bottom:20px
margin-left:50%
}
</style>
</head>

<body>
<p>Este texto tiene definido un ancho de margen distinto para cada
lado del elemento.</p>
</body>
Resultado

Este texto tiene definido un ancho de margen
distinto para cada lado del elemento.


Tabla de las propiedades de los márgenes

PropiedadDescripciónValoresDetallesEj.
margin Ancho para varios márgenes individuales.

margin-top: Define el ancho del margen superior.

margin-right: Define el ancho del margen derecho.

margin-bottom: Define el ancho del margen inferior.

margin-left: Define el ancho del margen izquierdo.
longitud Longitud Ejemplo de como definir el ancho de un margen en pixels
% Porcentaje Ejemplo de como definir el ancho de un margen en porcentajes
auto Automático Ejemplo de como definir el ancho con el valor auto


<<< Bordes - Border en CSS Dimensiones en CSS >>>

En la Web