Margen CSS
La propiedad CSS margin se utiliza para crear espacio alrededor de un elemento. CSS proporciona propiedades individuales para establecer el margen de cada lado de un elemento (superior, derecho, inferior e izquierdo).
Los lados individuales
Con la ayuda de las siguientes propiedades, puedes establecer el margen para cada lado de un elemento:
Ya es evidente que para la parte superior usamos margin-top, para la inferior margin-bottom, para el lado izquierdo margin-left y para el derecho margin-right.
Todas las propiedades de margen aceptan los siguientes valores:
auto- el margen es calculado por el navegador,length- especifica un margen enpx,pt,cm, etc.,%- especifica un margen como porcentaje del ancho del elemento contenedor,inherit- especifica que el margen debe heredarse de su elemento padre.
La propiedad margin acepta valores negativos.
Margin como propiedad abreviada
La propiedad CSS margin es una propiedad abreviada para las propiedades de margen individuales que se indican a continuación:
Cuando la propiedad margin tiene cuatro valores diferentes, se ve así en el código:
Márgenes CSS diferentes
p {
margin-top: 25px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;
}Si todos los lados tienen el mismo valor, por ejemplo, todos los lados son 50px, en CSS podemos escribirlo así.
Mismo margen CSS, código
p {
margin: 50px;
}Cuando los lados superior e inferior tienen el mismo valor (por ejemplo, 15px) y los lados izquierdo y derecho tienen el mismo valor (por ejemplo, 10px), puedes usar el siguiente código.
Margen CSS con 2 números, código
p {
margin: 15px 10px;
}Esto es equivalente a:
Margen CSS con 2 números, forma larga, código
p {
margin-top: 15px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 10px;
}Cuando los lados izquierdo y derecho son iguales (por ejemplo, 15px), el lado superior es 5px y el lado inferior es 10px, puedes escribir:
Margen CSS con 3 números, código
p {
margin: 5px 15px 10px;
}Esto es equivalente a:
Margen CSS con 3 números, forma larga, código
p {
margin-top: 5px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;
}Ejemplo de la propiedad margin:
Código de la propiedad margin CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: white;
margin: 25px 10px 15px 20px;
}
</style>
</head>
<body>
<p>Paragraph with background-color, color and margin properties.</p>
</body>
</html>Resultado
El valor auto de la propiedad margin
Puedes centrar horizontalmente un elemento dentro de su contenedor estableciendo la propiedad margin en auto. Como resultado, el elemento ocupará su ancho definido y el espacio restante se dividirá por igual entre los márgenes derecho e izquierdo.
Ejemplo de la propiedad margin con el valor "auto":
Ejemplo de uso del valor “auto” de la propiedad margin:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 300px;
margin: auto;
background-color: red;
}
</style>
</head>
<body>
<h2>The auto value</h2>
<p>
Setting the “auto” value of the margin property you can horizontally center the element inside its container. As a result, the element will take up the defined width and the space that remains, will be divided between the right and left margins.
</p>
<div>
The auto value horizontally centered this div.
</div>
</body>
</html>El valor inherit de la propiedad margin
En el siguiente ejemplo, el margen izquierdo del elemento <p> se hereda de su elemento padre (<div>):
Ejemplo de la propiedad margin con el valor "inherit":
Ejemplo de uso del valor “inherit” de la propiedad margin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: lightblue;
margin-left: 100px;
}
p.inherit {
margin-left: inherit;
padding: 10px 0;
}
</style>
</head>
<body>
<h2>The inherit value</h2>
<p>
Here the left margin is inherited from its parent element:
</p>
<div>
<p class="inherit">
With the help of the "inherit" value, the left margin is inherited from the div element.
</p>
</div>
</body>
</html>Práctica
¿Qué propiedades puedes establecer con el margen CSS?