• Propiedades de margenes y padding
• Ejemplos

Propiedades de margenes y padding

Con estas propiedades especificamos los margenes de cualquier elemento y con el padding controlamos la distancia entre el borde y el contenido.

Las propiedades que podemos utilizar son las siguientes:

margin-top

Fijamos el margen superior.

Con la propiedad auto el navegador un valor adecuado dependiendo del tipo de elemento.

XX unidades | % | auto (el valor por defecto es 0)

BODY {margin-top: 1cm}

margin-bottom

Fijamos el margen inferior. No se hereda.

XX unidades | % | auto (el valor por defecto es 0)

margin-left

Fijamos el margin izquierdo. No se hereda.

XX unidades | % | auto (el valor por defecto es 0)

margin-right

Fijamos el margen derecho. No se hereda.

XX unidades | % | auto (el valor por defecto es 0)

margin

Mediante esta propiedad podemos especificar todos los valores de los margenes de una sola vez.

Se pueden poner hasta cuatro valores, para especificar cada uno de los margenes.

margin: ancho1 ancho2 ancho3 ancho4

Pero si sólo especificamos ancho1 se refíere a los cuatro lados del margen. Si se especifican dos valores, ancho1 se refíere a los lados superior e inferior y ancho2 al izquierdo y derecho. En el caso de poner los tres primeros, ancho1 se refiere al lado superior, ancho2 al izquierdo y derecho y ancho3 al inferior.

Esta propiedad no se hereda.

XX unidades | % | auto (el valor por defecto es 0)

BODY {margin: 1in 2in} 

En el ejemplo le estamos dando a la página un margen superior e inferior de 1 pulgada e izquierdo y derecho de 2 pulgadas.

padding-top

Distancia entre el borde superior y el contenido. No se hereda.

XX unidades | %

padding-bottom

Distancia entre el borde inferior y el contenido.No se hereda.

XX unidades | %

padding-left

Distancia entre el borde izquierdo y el contenido. No se hereda.

XX unidades | %

padding-right

Distancia entre el borde derecho y el contenido. No se hereda.

XX unidades | %

padding

Mediante esta propiedad podemos definir en una única propiedad los cuatro valores anteriores. Funciona de la misma manera que la propiedad margin.

Esta propiedad no se hereda.

XX unidades | %

H1 {padding: 10%}

 Ejemplos

He creado una página con citas que hacen relación a la inteligencia donde podreis observar la aplicación de estas propiedades.