Página inicial  

trans_770 trans_160

Unidad 17. Estilos CSS Avanzado (X)


Controles de margen

 

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.

margen
texto
margen

 

margin-top, margin-right, margin-bottom y margin-left establecen la distancia de los bordes del elemento al elemento padre.

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

Por ejemplo, en la siguente 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;

}

margen
texto
margen

Los márgenes superiores e inferiores se pueden ver en la distancia que hay de la caja interior a las palabras margen.

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:

.bloque_interior {

margin-top: 20px;

margin-right: 0px;

margin-bottom: 5px;

margin-left: -10px;

}

Este bloque se podría reescribir 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 caso los márgenes superior e inferior serán de 20px y los de los lados de 5.

 

En caso de que quieras que todos los margenes tengan la misma distancia puedes 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. Dejando que los bordes del elemento sean determinados por el navegador.

Esta opción, sin embargo, no se trata del mismo modo en todos los navegadores.

Internet Explorer no sigue los estándares y no la maneja de un modo correcto.

Por lo que cuando con otros navegadores centrar un elemento es muy sencillo con el valor auto, para IE hay que hacer una pequeña trampa.

Veamos el siguiente ejemplo:

margen
texto
margen

El código CSS de la caja interior es:

.bloque_interior {

margin-right: auto;

margin-left: auto;

}

Si intentas hacerlo sobre el body, en IE no funcionará. Los márgenes auto no centrarán el bloque.

Deberás darle la siguiente propiedad al body para que funcione:

text-align: center;

Esto simplemente alineará el texto al centro en el resto de navegadores (donde deberemos seguir utilizando el valor auto para los márgenes) y hará que los bloques se alineen en el centro de la pantalla.

 

padding-top, padding-left, padding-bottom y padding-right establecerán la distancia del borde de un elemento con sus etiquetas interiores.

Lo entenderás mucho mejor con el siguiente ejemplo:

texto

A esta caja le hemos aplicado el siguiente estilo:

.bloque {

padding-top: 20px;

padding-right: 5px;

padding-bottom: 5px;

padding-left: 10px;

}

Como puedes ver la distancia de la palabra texto a los bordes derecho e inferior es de 5px.

Y lo mismo pasa con los márgenes superior (20px) e izquierdo (10px).

 

Igual que con los márgenes podemos abreviar las reglas CSS utilizando la propiedad margin.

Así, el bloque anterior:

.bloque {

padding-top: 20px;

padding-right: 5px;

padding-bottom: 5px;

padding-left: 10px;

}

Se podrá reescribir como:

.bloque {

padding: 20px 5px 5px 10px;

}

Recuerda, también, mantener el orden top, left, bottom, right.

 

Los casos de repetición se aplican igual que en los márgenes, por lo que podrás escribir los siguientes casos:

.bloque1 {

padding: 20px 5px 5px 10px;

}

.bloque2 {

padding: 20px 7px;

}

.bloque3 {

padding: 5px;

}


  Ir a la página anterior Índice del curso  Ir a la siguiente página  

Pág. 17.10

Aviso legal: este curso es gratuito siempre que se visualice desde la página web de aulaClic. No está permitido descargar el curso y utilizarlo en academias o centros de enseñanza privados sin estar conectado a Internet.
© aulaClic. Todos los derechos reservados. Free Computer tutorials. Prohibida la reproducción por cualquier medio.
Agosto - 2006.