Margen CSS
CSS Tutorial » Margen CSS
Margen CSS definicion
Los márgenes se utilizan para crear espacio alrededor de los elementos, fuera de los bordes definidos.
Existen propiedades para establecer el margen para cada lado de un elemento (superior, derecha, inferior e izquierda).
(espacio alrededor de caja verde marcado con amarillo)
Establecer márgenes para lados individuales
Puede especificar los márgenes de los lados individuales de un elemento, como los lados superior, derecho, inferior e izquierdo, utilizando CSS
- margin-top
- margin-right
- margin-bottom
- margin-left
Todas las propiedades de los márgenes pueden tener los siguientes valores:
- auto: el navegador calcula el margen
- length - especifica un relleno en px, pt, cm, etc.
- % - especifica un relleno en% del ancho del elemento contenedor
- inherit - especifica que el relleno debe heredarse del elemento padre
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #FFC;
}
div {
border: 1px solid green;
margin-top: 80px;
margin-bottom: 80px;
margin-right: 20px;
margin-left: 50px;
background-color: lightblue;
}
</style>
</head>
<body><div>
<h2>Usar propiedades de margen individuales</h2>
Este elemento div tiene un margen superior de 80 px, un margen derecho de 20 px, un margen inferior de 80 px y un margen izquierdo de 50 px.</div></body>
</html>
Etiquetas: Margen CSS, valores, centrado, definición, no funciona, propiedad, margen y relleno en css, margen relleno bordes y box model en css
La propiedad de taquigrafía de margen
Para acortar el código, es posible especificar todas las propiedades de los márgenes en una propiedad.
La propiedad de margen es una propiedad abreviada de las siguientes propiedades de margen individuales:
- margin-top
- margin-right
- margin-bottom
- margin-left
Si la propiedad de margen tiene cuatro valores :
margin: 20px 55px 70px 90px; eso significa:
el margen superior es de 20px
el margen derecho es 55px
el margen inferior es de 70px
el margen izquierdo es 90px
Si la propiedad de margen tiene tres valores:
margin: 20px 55px 70px;
- margen superior is 20px
- los márgenes derecho e izquierdo son 55px
- el margen inferior es 70px
Si la propiedad de margen tiene dos valores:
margin: 20px 55px;
- los márgenes superior e inferior son 20px
- los márgenes derecho e izquierdo son 55px
Si la propiedad de margen tiene un valor:
- margin: 25px;
- los cuatro márgenes son 25px
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 20px 50px 70px 90px;
background-color: lightblue;
}
p {
border: 1px solid black;
margin: 20px 50px 70px;
background-color: lightblue;
}
pre {
border: 1px solid black;
margin: 20px 40px;
background-color: lightblue;
}
h1 {
border: 1px solid black;
margin: 60px;
background-color: lightblue;
}
</style>
</head>
<body><h2>La propiedad de taquigrafía de margen: 4 valores</h2>
<div>Este elemento div tiene un margen superior de 20px, un margen derecho de 50px, un margen inferior de 70px y un margen izquierdo de 90px.</div><hr>
<h2>La propiedad de taquigrafía de margen: 3 valores</h2>
<p>Este elemento p tiene un margen superior de 20px, un margen derecho e izquierdo de 50px y un margen inferior de 70px.</p><hr>
<h2>La propiedad de taquigrafía de margen - 2 valores</h2>
<pre>Este pre elemento tiene un margen superior e inferior de 20px y un margen derecho e izquierdo de 40px.</pre><hr>
<h2>La propiedad de taquigrafía de margen - 1 valor</h2><h1>Este elemento h1 tiene un margen superior, inferior, izquierdo y derecho de 60px.</h1>
</body>
</html>
Centrado horizontal con márgenes automáticos
El valor automático ( auto ) de la propiedad de margen le dice al navegador web que calcule automáticamente el margen.
Esto se usa comúnmente para centrar un elemento horizontalmente dentro de un contenedor más grande.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Centrado de un elemento con margen automático de CSS</title>
<style>
.caja {
width: 350px;
height: 210px;
margin: 0 auto;
background-color: #D6D6D6;
}
</style>
</head>
<body>
<div class="caja">
<h1>Este es un titulo</h1>
<p>Este es un párrafo de texto.</p>
</div>
</body>
</html>
Etiquetas: Margen CSS, valores, centrado, definición, no funciona, propiedad, margen y relleno en css, margen relleno bordes y box model en css
Margen CSS - css.es
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.