Con estas propiedades especificamos los margenes de cualquier elemento y con el padding controlamos la distancia entre el borde y el contenido.
- 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%}
Tutoriales
Ejemplos
