padding
Propiedades de los márgenes internos

<< margin Propiedades de las tablas >>

Propiedades de los márgenes internos

El padding es un concepto parecido al margen que hemos estado viendo, pero con una diferencia fundamental. En este caso, hablamos de la distancia entre el borde del elemento y su contenido (en el caso del margen hablábamos de distancia entre el borde del elemento el elemento que lo contenía, o los elementos de alrededor).

Los valores que se pueden dar son similares a los que vimos al asignar márgenes:

  • padding-top, padding-bottom, padding-left, padding-right: Distancia del contenido respecto a los bordes (arriba, abajo, izquierda y derecha en este orden). Se especifica de 2 formas:
  • ◦ porcentaje (%): El padding será un porcentaje del tamaño del elemento (si es padding de arriba o abajo, será el tamaño en altura, y si es el padding de derecha o izquierda, el tamaño en anchura. Puede usarse otra unidad relativa.
  • ◦ distancia (píxeles->px, centímetros->cm,...): distancia fija del contenido con respecto al borde superior, inferior, derecho o izquierdo.
#padding1 {
     padding-top: 25px;
     padding-bottom: 25px;
     padding-left: 20px;
     padding-right: 20px;
}

Otra forma de hacer lo mismo (se puede aplicar a margin y a muchas propiedades de CSS, pero tenemos que saber lo que hacemos) es aplicar todos los valores al atributo padding separados por espacios (estos cuatro valores se aplicarían en orden a los lados arriba, derecha, abajo e izquierda), quedando así:

#padding1 {
     padding: 25px 20px 25px 20px;
}

Si sólo le ponemos un valor a padding, aplica ese valor a los 4 lados, y si le ponemos 2 valores, el primero lo aplica a los lados de arriba y abajo, y el segundo, a derecha e izquierda. Con lo cual lo podemos simplificar al máximo así:

#padding1 {
     padding: 25px 20px;
}

<< margin Propiedades de las tablas >>