En esta ocasión os voy a hablar de una propiedad CSS llamada “margin“. Esta propiedad sirve para dejar una separacion entre el elemento al que se la pongamos y otro. Es una propiedad muy sencilla de usar y tiene mucha utilidad. Os voy a poner un ejemplo:
<html>
<head>
<style type="text/css">
#capa
{
width:100px;
height:100px;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div id="capa">capa 1</div>
<div id="capa">capa 2</div>
<div id="capa">capa 3</div>
</body>
</html>Aquí hemos creado tres capas, las tres tienen el mismo formato, lo único que cambia de una a otra es el texto que aparece dentro de ellas. Si ejecutamos esto en el navegador veremos lo siguiente:
No he puesto nada referente al posicionamiento de las capas, por lo cual aparece cada una debajo de la anterior y sin separación. Ahora vamos a añadirle la propiedad “margin” al CSS para separarlas. Os pongo el ejemplo anterior con la propiedad “margin-top” como podéis ver:
<html>
<head>
<style type="text/css">
#capa
{
width:100px;
height:100px;
background-color: blue;
color: white;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="capa">capa 1</div>
<div id="capa">capa 2</div>
<div id="capa">capa 3</div>
</body>
</html>Ahora si ejecutáis la pagina en el navegador veréis que se ha añadido una separación en la parte superior de cada capa de 10 pixels. Entonces esto sera lo que veamos en el navegador:
Ahora os voy a explicar un poco la sintaxis, es muy sencilla. Si queremos aplicar la propiedad margin a todos los lados de una capa con el mismo valor lo tendríamos que hacer de esta forma:
#capa
{
margin: 10px;
}
Esto seria lo mismo que:
#capa
{
margin: 10px 10px 10px 10px;
}
Y esto seria igual también:
#capa
{
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
}
Las tres formas anteriores de definir la propiedad “margin” en CSS harían lo mismo, es obvio que lo recomendable es usar la primera que he puesto, es mas sencilla y rápida. Si queremos definir un “margin” diferente para cada lado de la capa la segunda opción es la mejor, los cuatro valores son de arriba, derecha, abajo e izquierda, en ese orden. La ultima forma sirve por si queremos definir el “margin” solo de un lado y tendríamos que poner solamente el que queramos modificar, al como están puestos son arriba, abajo, izquierda y derecha.
Esta propiedad, “margin“, es un recurso muy bueno para centrar contenido. Vamos a crear una capa llamada “capa” y la vamos a centrar en el navegador con CSS, el ejemplo seria así:
<html>
<head>
<style type="text/css">
#capa
{
width:500px;
height:500px;
background-color: blue;
}
</style>
</head>
<body>
<div id="capa"></div>
</body>
</html>
Al ejecutar esta pagina en el navegador veremos lo siguiente:
Aquí podéis ver la capa que hemos creado, es de 500×500 y de color azul. También vemos que no hemos definido su posicionamiento y, por lo tanto, aparece en la parte izquierda de la ventana del navegador. Ahora vamos a poner dicha capa en el centro de la ventana de la siguiente forma:
<html>
<head>
<style type="text/css">
#capa
{
width:500px;
height:500px;
background-color: blue;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="capa"></div>
</body>
</html>Ahora al ejecutar esta pagina en el navegador veremos la capa centrada de esta forma:
Esto lo hemos conseguido con “margin: 0 auto”, el “0” indica que los margenes superior e inferior sean cero y el “auto” para que el espacio que sobre del ancho lo reparta en dos partes iguales y así la capa quede centrada.
Si os fijáis en la ventana del navegador hay un margen entre el borde superior de la capa y el borde de la zona de contenido, ese borde o espacio esta predefinido en HTML y podemos quitarlo, es decir, si queremos que la capa este pegada arriba tendríamos que empezar le CSS con esto:
<html>
<head>
<style type="text/css">
body
{
margin: 0px;
}
#capa
{
width:500px;
height:500px;
background-color: blue;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="capa"></div>
</body>
</html>De esta forma no habría el espacio existente, probad el ultimo ejemplo y veréis la diferencia. El valor de la propiedad “margin” la he puesto en pixels pero también se puede poner en porcentaje. Aquí os dejo un vídeo en el cual os lo explico todo:
Espero que os haya gustado, un saludo.
Sobre el autor
Liher
Me gusta Linux, probar distribuciones nuevas y aprender de ellas. Tambien me gusta el diseño web y sus infinitas posibilidades
Jo…parece que hace mil años que lo aprendimos…jajaja
Lo has explicado muy bien porque dependiendo de como te lo expliquen puede llegar a ser lioso esto del margin y el padding…aunque no lo parezca…ademas viene bien para ir repasando porque con tanta plantilla al final se te olvida escribir codigo, y a mi …sinceramente creo que es lo que mas me gusta el css y por supuesto el html. Ver como van saliendo las cosas de la nada solo con unas pocas lineas es …. gratificante…jajajaja. Saludos.
Tienes razon, a mi eso de ir creando una web empezando con la pantalla en blanco me gusta, un saludo 😀
Yo estoy muy pez en los temas relacionados con la web, pero aquí apuntado queda para cuando lo necesite 🙂
¡Gracias Liher!
Es la primera vez que hago esto y me gusta
Me costo…pero salió!
¡salú amigo!
Hola!!!
Hace un par de días encontré este blog y me ha gustado mucho. Estoy leyéndome TODOS los articulos y hoy tocaba este 🙂
Se que no es la mejor forma de empezar poniendo un comentario como este pero permíteme que te haga una corrección: no usas bien el atributo ID.
Según la documentación oficial del W3C: “Lo que hace especial al atributo id es que no pueden existir dos elementos dentro del mismo documento con el mismo id”.
Aparte, como imagino que ya sabes, si tienes duplicado el mismo ID en diferentes elementos, el acceso a elementos DOM usando document.getElementById de Javascript te tomará el último que encuentre.
Así que, en el trozo de código:
capa 1
capa 2
capa 3
deberías usar una clase (atributo class) u otra alternativa (pej un selector de tipo).
Espero que no te moleste la corrección, pero es que me ha llamado mucho la atención este error.
Un saludo
El codigo HTML que pretendía poner en mi anterior mensaje no ha salido como quería 🙂
Lo pongo en este:
capa 1
capa 2
capa 3
Ya lo vi en el email, gracias nuevamente.
Hola Jaime, toda correcion es bienvenida siempre y sobre todo si es como esta, muchas gracias. Tengo que decirte que este es solo un curso de iniciacion para conocer las etiquetas y poco mas, de todas formas muchas gracias amigo 😀
No hay de que!! 🙂
Gracias a ti por tu blog 😉
Es un placer escribir y encontrar usuarios como tu 🙂