Unidad 17. Estilos CSS Avanzados (XV)

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

En los siguientes ejemplos, mostramos el padding con un color naranja:

Lo entenderás mucho mejor con el siguiente ejemplo:

.bloque_interior  {

    padding-top: 20px;

    padding-right: 5px;

    padding-bottom: 5px;

    padding-left: 10px;

    margin: 5px;

} 
Texto

En el ejemplo anterior vemos el contenido de la caja en azul. Vemos que en vez de comenzar en el mismo borde como antes, queda alejado, lo que vemos coloreado en naranja. Esto es el padding. Como puedes ver la distancia del contenido a los bordes derecho e inferior es de 5px. En cambio, la distancia con el lado superior es mayor, de 20px y con el lado izquierdo de 10.

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

Observa que además existe un margen exterior (en verde).

 

Igual que con los márgenes podemos abreviar las reglas CSS utilizando la propiedad padding. Podemos los padding distintos en una misma regla (arriba, derecha, abajo, izquierda), definir los pares de padding (arriba-abajo, izquierda-derecha) o asignarles el mismo valor a todo.

.bloque1  {

   padding: 20px  15px 15px  20px;

}

.bloque2  {

   padding: 10px  5px;

}

.bloque3  {

   padding: 15px;

}  

 

Si un elemento tiene margen, y el elemento que lo contiene tiene padding, se suman. Veamos un ejemplo:

.bloque_exterior  {

    padding: 10px;

}

.bloque_interior  {

    margin: 10px 0;

    padding: 5px;

} 
Texto

Como vemos el bloque exterior deja un padding de 10px. Como el interior tiene un margen superior e inferior de otros 10px, se suman y queda una separación entre los lados de 20px.

 

Por defecto, muchos elementos suelen tener margen. La mayoría no tienen padding. Muchas veces, los valores del margen son distintos en distintos navegadores, lo que hace que los elementos no se vean igual. Por eso es recomendable establecer siempre nuestros márgenes, y no dejar el que muestra por defecto el navegador.

Pág. 17.15

Atrás  Inicio  Adelante





Página inicial  Cursos Informática Gratuitos

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


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