Unidad 17. Estilos CSS Avanzados (XIV)


17.13. Controles de margen interior y exterior

Ahora veremos unas cuantas reglas que afectarán a los bordes y márgenes de los elementos.

Para ello utilizaremos el mismo ejemplo: dos cajas, una dentro de la otra. En el ejemplo, la zona en verde, es el margen de la caja interior, que se toma con respecto a la caja que lo contiene. Iremos cambiando los valores de ese margen para ver el efecto.

 

margin-top, margin-right, margin-bottom y margin-left establecen el margen a cada lado del elemento.

El margen establece la distancia que queda entre el borde exterior del elemento y el interior del elemento que lo contiene, o entre él y el siguiente elemento.

El margen no forma parte del elemento, por lo que no mostrará sus propiedades, por ejemplo el color de fondo.

Puedes utilizar píxeles o porcentajes para indicar estas distancias.

Por ejemplo, en la siguiente caja se le ha dado al bloque interior la siguiente clase:

.bloque_interior  {
     margin-top: 20px;
     margin-right: 0px;
     margin-bottom: 5px;
     margin-left: -10px;
} 

Los márgenes superiores e inferiores se pueden ver en las franjas verdes (arroba la mayor, de 20px y abajo de 5px).

Observa cómo el margen 0 del lado derecho hace que los bordes queden pegados, mientras que un valor negativo hace que el bloque salga de la caja.

 

La propiedad margin te permite unificar varias propiedades en una sola. Así, la regla anterior podría quedar como:

.bloque_interior  {
   margin: 20px  0px 5px  -10px;
} 

Recuerda que deberás seguir el orden top, right, bottom y left.

 

En el caso de que los valores arriba y abajo (top y bottom) e izquierda y derecha (left y right) sean iguales entre sí se puede escribir en dos valores, como:

.bloque_interior  {
   margin: 20px  5px;
} 

En este formato, el primer valor (20px) indica los márgenes superior e inferior y el segundo (5px) corresponde a los márgenes izquierdo y derecho.

En le aso de haber tres valores, corresponderían a arriba, izquierda-derecha y abajo respectivamente.

 

En caso de que quieras que todos los márgenes tengan la misma distancia basta escribirlo sólo una vez:

.bloque_interior { 
   margin: 20px; 
} 

Ahora todos los márgenes serán de 20 píxeles.

 

También se pueden establecer estas propiedades a auto. Esta propiedad resulta muy útil para centrar horizontalmente bloques en los que hemos definido el ancho. En los ejemplos anteriores, el bloque exterior tenía asignada esta propiedad. De lo contrario, aparecería a la izquierda de la página.

.bloque_exterior {
    width: 150px;
    margin: auto;
}

Cuando los elementos son contiguos, si ambos tienen margen, estos márgenes se solapan, quedando como margen la distancia mayor. Veamos el siguiente ejemplo:

.bloque_interior { 
   margin: 20px; 
} 

En el ejemplo anterior, tenemos dos bloques interiores ambos con margen de 20px. Si los márgenes se sumasen, la distancia entre ellos sería de 40px. En cambio al solaparse queda la misma distancia que arriba o abajo, 20px.


Marzo-2015
Pág. 17.14
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.