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.

Comparte este artículo en tu red Twitter Comparte este artículo en tu red Facebook Comparte este artículo en tu red Google Enviar '' a Meneame.net