Margen

Hay diversos elementos en los que podemos establecer ciertos márgenes para separarlos así de otros elementos. Por ejemplo podemos separar unos párrafos de otros, o incluso separarlos respecto de los márgenes de la página. Para todo esto, se pueden definir cuatro atributos para esa propiedad:

  • margin-top: define el margen superior del elemento al que se aplique.
  • margin-bottom: define el margen inferior.
  • margin-left: margen izquierdo y...
  • margin-right: que define el margen derecho.

Y como se definen sus valores? Existen varias formas de hacerlo, o mejor dicho, diversas unidades que se pueden utilizar, a saber: puntos (pt), pixeles (px), tantos por ciento (%), pero no centímetros (cm) ni pulgadas (in) que son para uso en HTML (es decir, directamente en el cuerpo o BODY), no en CSS que es el caso que nos ocupa.

Un ejemplo. Si queremos que todos los párrafos tengan unos márgenes de 10 pixeles y un color de texto azul, tendremos que definir la siguiente Regla CSS en la Hoja de Estilo:

p { margin-top:10px ; margin-bottom:10px; margin-left:10px;
margin-right:10px; color:blue ;}

Si definimos los cuatro tipos (atributos) de márgenes comentados, podemos resumirlo de la siguiente manera:

margin: valorsuperior valorderecho valorinferior valorizquierdo ;

eso sí, respetando ese orden y SIN separar esos valores con comas. El ejemplo anterior quedaría así de cortito:

p { margin: 10px 10px 10px 10px; color:blue ; }

Veis que corto? si es que esto son todo ventajas, je je je.