Margin

Como hemos dicho la propriedad margin representa la distancia entre el borde de la caja y los elementos que la rodean. Css define cuatro propriedades para controlar cada uno de los márgenes horizontales y verticales de un elemento: margin-top, margin-right, margin-bottom, margin-left. Se aplican a todos los elementos. Salvo margin-top y margin-bottom que sólo se aplican a elementos de bloque y a los imágenes. Tiene como valor inicial 0.

Las unidades más utilizadas para indicar los márgenes de un elemento son los pixeles (requiere una precisión total), em (para hacer diseños que mantengan las proporciones) y los porcentajes (para hacer diseños fluidos).

Css define una propriedad llamada shorthand que nos ayuda a reducir el código. Por ejemplo:

                  p{
                    margin-top: 3px;
                    margin-right: 5px;
                    margin-bottom: 7px;
                    margin-left: 1px;
                  }
                

Se podría escribir (en el sentido de las agujas de reloj: arriba, derecha, abajo, izquierda):

                 
                  p{
                    margin: 3px 5px 7px 1px;
                  }
                

Hay más formas de indicar los valores:

• si se indica un solo valor, todos los margenes tiene este valor
• si se indica dos valores, el primero se asigna al margen superior e inferior y el segundo se aplica a los márgenes derecho e izquierdo
• si se indica tres valores, el primero es superior, el tercero es el inferior y el segundo es el izquierdo y el derecho

Siguiente

Anterior