Márgenes para capas en HTML5 y CSS3
Vamos a seguir posicionando nuestras capas en la página web, para ello usaremos dos propiedades: margin y padding. Con ellas conseguiresmos posicionar las capas dentro de nuestra página web, estableciendo una separación respecto del resto de elementos, o bien dándole un margen a las capas respecto de los elementos que contienen.
Margin
Con esta propiedad indicaremos la separación que debe mantener la capa con los elementos que la rodean. Podríamos llamarlo "margen exterior", y le daremos los valores en píxeles o en porcentaje.
Los distintos márgenes que podemos establecer para nuestros elementos serían:
- margin-top: valor (separación con el elemento superior)
- margin-bottom: valor (separación con el elemento inferior)
- margin-left: valor (separación con el elemento de la izquierda)
- margin-right: valor (separación con el elemento de la derecha)
- margin: valor valor valor valor (utilizaremos este atributo para señalar los 4 valores en el siguiente orden: superior, derecha, inferior, izquierda. Teniendo la posibilidad de recibir dos valores, en cuyo caso el primer valor sería para los lados superior e inferior, y el segundo para los lados izquierdo y derecho. O podemos asignarle un único valor, que sería el mismo para todos los lados)
Padding
Con este atributo indicaremos la separación de los elementos que contiene la capa respecto a sus bordes. Al igual que el margin, admite valores tanto en píxeles como en porcentaje, y tiene como formas:
- padding-top: valor (para la distancia de los elementos contenidos respecto al borde superior de la capa)
- padding-bottom: valor (para la distancia de los elementos contenidos respecto al borde inferior de la capa)
- padding-left: valor (para la distancia entre los elementos que contiene la capa y su borde izquierdo)
- padding-right: valor (para la distancia entre los elementos contenidos respecto al borde derecho de la capa)
- padding: valor valor valor valor (igual que margin: un valor: el mismo para todos los bordes respecto a los elementos contenidos en la capa, dos valores: el primero superior e inferior y el segundo izquierdo y derecho, cuatro valores: superior derecha inferior izquierda)
Ya tenemos las capas posicionadas y con contenido, en el siguiente tema empezaremos a personalizarlas con el atributo border
SI QUIERES VER EJEMPLOS POSICIONAMIENTO MEDIANTE MÁRGENES DE CAPAS EN HTML5 Y CSS3, Y ESTE TEMA DESARROLLADO, HAZ CLIC AQUÍ
