Web.CSS.Márgenes.
Los márgenes se utilizan para crear un espacio alrededor de un elemento HTML, es decir, controlar el margen horizontal y vertical.
Margen Individual.
Aquí se van a tratar los márgenes de forma individual y así poder controlar donde colocar un elemento. Un ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Márgenes individuales</h2>
<div>Aquí se puede meter un texto cualquiera para probar.</div></body>
</html>En este ejemplo se ha creado un bloque con un estilo de borde determinado y con fondo de pantalla azul claro. Ahora bien, los márgenes trabajan de la siguiente forma:
- Si no se le especifica margen, por defecto se coloca arriba a la izquierda de la página después de siguiente elemento, si es que lo hubiere.
- Si estuviera dentro de un elemento contenedor, se colocaría arriba a la izquierda del contenedor si no se le especificara margen.
- En el caso de que se le especificara margen el elemento partiría siempre desde arriba a la izquierda y a partir de ahí se empieza desplazar.
Márgenes. Funciona exactamente igual que los bordes.
- margin-top: 100px; Margen superior.
- margin-bottom: 100px; Margen inferior.
- margin-right: 150px; Margen derecho.
- margin-left: 80px; Margen izquierdo.
Los márgenes en una sola instrucción.
Se puede poner el valor de todos los márgenes en una sólo instrucción, pero el orden de los valores cambia. Un ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 100px 150px 100px 80px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Usando todos los márgenes a la vez</h2>
<div>Aquí se puede meter cualquier texto.</div>
</body>
</html>En este ejemplo se ha hecho exactamente lo mismo que en los márgenes individuales, la diferencia está, en que se ha hecho en una sólo instrucción. En el mismo orden significa: Margen superior, margen derecho, margen inferior y margen izquierdo.
La propiedad margin pueden tomar los valores siguientes:
- margin: 25px 50px 75px 100px; Especifica los valores de margen superior, derecho, inferior e izquierdo.
- margin: 25px 50px 75px; Especifica los valores de margen superior, el segundo valor el margen derecho e izquierdo y finalmente el ultimo valor el margen inferior
- margin: 25px 50px; El primer valor especifica el margen superior e inferior y último valor el margen derecho e izquierdo.
- margin: 25px; Especificia que todos los valores posibles de los márgenes son el mismo.
- margin: auto; Especifica los márgenes de forma que quede totalmente en el centro.
Valores heredados.
<!DOCTYPE html>
<html>
<head>
<style>
div.bloque {
border: 1px solid red;
margin-left: 100px;
} p.one {
margin-left: inherit;
}
</style>
</head>
<body>
<h2>Valores heredados</h2>
<div class="bloque">
<p class="one">Texto cualquiera de ejemplo.</p>
</div>
</body>
</html>
En este ejemplo existe un bloque <div> con un estilo determinado y con un margen izquierdo de 100 píxeles. Se puede usar la herencia para darle el mismo efecto a todo lo que se quiera meter dentro del bloque, poniendo solamente el valor inherit. Al usarlo en el párrafo lo que se ha logrado es que éste tenga también un margen izquierdo de 100 píxeles, heredando así el mismo margen que tiene el bloque principal.
