CSS, uso de la propiedad margin

En CSS la propiedad margin es la que nos permite crear márgenes a nuestros elementos HTML, un ejemplo es crear un margen entre imágenes y espacio entre un elemento  otro, en este tutorial vamos a ver como se comporta y como podemos manejarlo para nuestro sitios web ya que ofrece accesibilidad a controlar la posición de objetos de forma fácil.

Conociendo margin

Definición
Establece la anchura de algunos o todos los márgenes de los elementos

Valores permitidos
Uno, dos, tres o cuatro de los siguientes valores:

• medida
• porcentaje
• auto
• inherit

Si se utilizan porcentajes, hace referencia a la anchura del elemento en el que se encuentra

Valor inicial
Cada margen define su propio valor por defecto

Se aplica a
Todos los elementos

Válida en
medios visuales

Se hereda
no

Definición en el estándar
http://www.w3.org/TR/CSS21/box.html#propdef-margin

Ejemplos de uso

Ahora si, la propiedad margin nos permite añadir márgenes invisibles a nuestros elementos, al decir margen me refiero al espacio entre un objeto y otro pudiendo hacer que que también podamos modificar la posición sin necesidad de convertir en objeto en un elemento flotante. Vamos a analizar la estructura del uso de margin:

div {
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

En el ejemplo podemos ver que se declara un estilo llamado div, se abren los corchetes y se empieza a definir la regla. Podemos ver que hay cuatro tipos de margin: margin-top, margin-right, margin-bottom y margin-left haciendo que el elemento div tenga un margen de 10 px arriba, abajo, a la derecha y a la izquierda.

Sin embargo, al ser la misma cantidad de pixéles de margen podemos simplificarla así, de forma que nos referimos a que todos los márgenes tienen el mismo tamaño.

div {
  margin: 10px;
}

Pero eso no es todo, también podemos simplificar varios márgenes estableciéndolo como lo anterior pero separándolos por comas y siguiendo el orden del primer ejemplo, es decir, primero va margen de arriba, luego el de a la derecha, abajo y al último izquierda.

div {
  margin: 10px 20px;
}   div {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
}

Por último hay que decir que así como usamos valores positivos podemos usar negativos, esto quiere decir que en vez de abrir un margen este se cerrará, por ejemplo:

  div {
  margin-top: -10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: -20px;
}

En el ejemplo el margen de arriba tiene –10 píxeles y el de la izquierda –20 px lo que se da a entender que en vez de que se cree un margen arriba y jale la imagen hacía abajo, se crea un margen partiendo desde dentro de la imagen, lo que hace que se vaya hacía arriba. De igual forma a la izquierda, en vez de irse a la izquierda se irá a la derecha.

 

Contesta la encuesta de la semana en Vida MRR: ¿Qué servicios usas para leer blogs y noticias?