CSS - Márgenes
La propiedad margin define el espacio alrededor de un elemento HTML. Es posible utilizar valores negativos para superponer contenido.
Los valores de la propiedad margin no son heredados por los elementos secundarios. Recuerde que los márgenes verticales adyacentes (márgenes superior e inferior) se colapsarán entre sí de modo que la distancia entre los bloques no sea la suma de los márgenes, sino solo el mayor de los dos márgenes o el mismo tamaño que un margen si ambos son igual.
Tenemos las siguientes propiedades para establecer un margen de elemento.
los margin especifica una propiedad abreviada para establecer las propiedades del margen en una declaración.
los margin-bottom especifica el margen inferior de un elemento.
los margin-top especifica el margen superior de un elemento.
los margin-left especifica el margen izquierdo de un elemento.
los margin-right especifica el margen derecho de un elemento.
Ahora, veremos cómo usar estas propiedades con ejemplos.
La propiedad de margen
La propiedad de margen le permite establecer todas las propiedades de los cuatro márgenes en una declaración. Aquí está la sintaxis para establecer un margen alrededor de un párrafo:
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p style = "margin: 15px; border:1px solid black;">
all four margins will be 15px
</p>
<p style = "margin:10px 2%; border:1px solid black;">
top and bottom margin will be 10px, left and right margin will be 2%
of the total width of the document.
</p>
<p style = "margin: 10px 2% -10px; border:1px solid black;">
top margin will be 10px, left and right margin will be 2% of the
total width of the document, bottom margin will be -10px
</p>
<p style = "margin: 10px 2% -10px auto; border:1px solid black;">
top margin will be 10px, right margin will be 2% of the total
width of the document, bottom margin will be -10px, left margin
will be set by the browser
</p>
</body>
</html>Producirá el siguiente resultado:
La propiedad margin-bottom
La propiedad margin-bottom le permite establecer el margen inferior de un elemento. Puede tener un valor en longitud,% o automático.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p style = "margin-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom margin
</p>
<p style = "margin-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom margin in percent
</p>
</body>
</html>Producirá el siguiente resultado:
La propiedad margin-top
La propiedad margin-top le permite establecer el margen superior de un elemento. Puede tener un valor en longitud,% o automático.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p style = "margin-top: 15px; border:1px solid black;">
This is a paragraph with a specified top margin
</p>
<p style = "margin-top: 5%; border:1px solid black;">
This is another paragraph with a specified top margin in percent
</p>
</body>
</html>Producirá el siguiente resultado:
La propiedad margin-left
La propiedad margin-left le permite establecer el margen izquierdo de un elemento. Puede tener un valor en longitud,% o automático.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p style = "margin-left: 15px; border:1px solid black;">
This is a paragraph with a specified left margin
</p>
<p style = "margin-left: 5%; border:1px solid black;">
This is another paragraph with a specified top margin in percent
</p>
</body>
</html>Producirá el siguiente resultado:
La propiedad margin-right
La propiedad margin-right le permite establecer el margen derecho de un elemento. Puede tener un valor en longitud,% o automático.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p style = "margin-right: 15px; border:1px solid black;">
This is a paragraph with a specified right margin
</p>
<p style = "margin-right: 5%; border:1px solid black;">
This is another paragraph with a specified right margin in percent
</p>
</body>
</html>Producirá el siguiente resultado: