Propiedad margin en CSS

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:

margin-css

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:

margin-css-2

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:

margin-css-3

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:

margin-css-4

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.

PDF

Acerca del autor

Liher

Me gusta todo lo relacionado con la informatica, especialmente Linux y el diseño web y me gusta compartir mis conocimientos, de esa forma aprendo cosas nuevas todos los dias