Margin en HTML5 y CSS3

La propiedad Margin, al igual que Padding es una de las dos que no ha cambiado durante la actualización del CSS y el HTML a CSS3 y HTML5 ya que ambas ya funcionaban bien. La diferencia entre Padding y Margin, es que la primera mide la distancia interna entre el borde y el contenido, mientras que Margin mide la distancia externa con otros elementos. Ya expliqué en otro post sobre el Padding en HTML y CSS como se escribe el código de esta propiedad y que se puede separa en cuatro valores: margin-top, margin-left, margin-bottom y margin-right , así que partiendo de esta base vamos a profundizar en algunos detalles, como por ejemplo el tipo de valores y unidades que se puede aplicar a la propiedad Margin en HTML5 o en CSS3.

¿Qué pasa si se escriben sólo 2 valores? Entonces el primer valor será para margin top, y de forma automática se traslada ese mismo espacio a la zona inferior. Y el valor de margin-left se traslada al lado opuesto de forma que izquierda y derecha tenen el mismo espacio desde el borde hacia afuera. Es decir la propiedad margin: 10px 6px; es el equivalente a escribir margin: 10px 6px 10px 6px; . Si sólo faltara el último valor se aplicaría igual, copiandolo del lado izquierdo.

Hasta ahora hemos asignado a las propiedades margin y padding sólo valores en píxeles que son magnítudes absolutas pero podemos darle otros valores a margin.

* Inherit. Es un valor que puedes usar para Margin en los códigos CSS3 (pero no en los códigos HTML5) ya que lo que indica este valor es que se hereda la norma margin del contenedor superior.

* Auto. También se puede emplear en CSS3, en esta caso es el navegador quien asignara el valor de forma automática.

* Valor absoluto. Se aplica tanto al HTML5 como a las hojas de estilo de CSS3. Se da en centímetros o en otras unidades que se mantienen constantes aunque varíe el tamaño de la pantalla o el tipo de fuente. Es prácticamente lo mismo que un valor en píxeles, sólo que en este caso el valor cambia de acuerdo a la resolución de la pantalla. Las unidades absolutas disponibles son:

• cm: centímetros
• mm: milímetros, para ingenieros que acotan todo de esta forma.
• in: pulgadas, para los ingleses que les encanta llevar la contraria.

* Valor relativo. Se da un porcentaje, que hace referencia al tamaño del elemento contenido en el bloque, tabla, etc. También existen valores con unidades relativas, la diferencia es que en el caso de los porcentages variará la distancia del margin al estrechar la pantalla de visualización, mientras que con las siguientes unidades se modifia el margen en referencia al tamaño de las letras.

• em: el tamaño de la fuente actual
• ex: la altura de la letra de la fuente actual.

Otra cosa interesante a tener en cuenta al usar las propiedades margin o padding en CSS3 o HTML5 es que su valor se suma al que hemos escrito para la caja. Es decir que es como si le sumaramos dos margenes, el padding en el interior y el margin en el exterior, así si ambos valores valen 20px puedes pasar de 400px del contenido a 480px.