Propiedad CSS padding-top
Cómo usar la propiedad CSS padding-top para definir el espacio de relleno en la parte superior de un elemento. Valores y ejemplos.
La propiedad CSS padding-top establece la altura del área de relleno en el lado superior de un elemento — el espacio entre el contenido del elemento (o su borde superior) y el contenido que se encuentra encima dentro de la caja.
El relleno es la capa más interna del modelo de caja CSS: de adentro hacia afuera se encuentra el contenido, luego el relleno, luego el borde y, finalmente, el margen. A diferencia del margen, el relleno está dentro del elemento, por lo que comparte el color de fondo del elemento y forma parte del área visible y clicable.
Usa padding-top cuando quieras empujar el contenido hacia abajo desde el borde superior de su contenedor — por ejemplo, para dar espacio a un encabezado debajo del borde superior de una tarjeta, o para añadir ritmo vertical dentro de un botón o bloque informativo sin afectar el espacio entre elementos separados (eso es para lo que sirve el margen).
Los valores negativos no son válidos. Si necesitas desplazar el contenido hacia arriba, utiliza un margin-top negativo en su lugar.
Esta propiedad no afecta visiblemente a los elementos en línea como <span> — el relleno vertical en una caja en línea no modifica la altura de línea ni separa las líneas adyacentes. Establece display: inline-block o display: block en el elemento si necesitas que el relleno superior surta efecto.
| Valor inicial | 0 |
|---|---|
| Se aplica a | Todos los elementos, excepto cuando la propiedad display está establecida en table-row-group, table-header-group, table-footer-group, table-row, table-column-group y table-column. También se aplica a ::first-letter. |
| Se hereda | No. |
| Animable | Sí. El espacio de relleno es animable. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.paddingTop = "10px"; |
Sintaxis
Sintaxis de la propiedad CSS padding-top
padding-top: length | initial | inherit;Ejemplo de la propiedad padding-top:
Ejemplo de la propiedad CSS padding-top con valor en px
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
border: 2px solid #666;
color: #8ebf42;
padding-top: 30px;
}
</style>
</head>
<body>
<h2>Padding-top property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Resultado
Ejemplo de la propiedad padding-top establecida en "em".
Ejemplo de la propiedad CSS padding-top con valor em
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
border: 2px solid #666;
color: #8ebf42;
padding-top: 4em;
}
</style>
</head>
<body>
<h2>Padding-top property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Un valor em es relativo al font-size propio del elemento, por lo que padding-top: 4em se escala con el texto. Esto resulta útil cuando se desea que el espaciado crezca y se reduzca junto con la fuente.
Ejemplo de la propiedad padding-top especificada en porcentaje:
El valor en porcentaje es especial: se calcula en relación con el ancho del bloque contenedor, no con su altura. Por tanto, padding-top: 15% equivale al 15% del ancho del elemento padre. Esta particularidad es la base de la técnica clásica de relación de aspecto para mantener una caja proporcional al redimensionarse.
Ejemplo de la propiedad CSS padding-top con valor "%":
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
border: 2px solid #cccccc;
color: #8ebf42;
padding-top: 15%;
}
</style>
</head>
<body>
<h2>Padding-top property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| length | Establece el relleno superior en px, pt, cm, etc. El valor predeterminado es 0. | Pruébalo » |
| % | Establece el relleno superior en % del ancho del elemento contenedor. | Pruébalo » |
| initial | Hace que la propiedad use su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. |
padding-top frente a la forma abreviada padding
padding-top controla un único lado. Cuando se configuran varios lados a la vez, la forma abreviada padding es más concisa. Estas dos reglas son equivalentes:
/* longhand */
padding-top: 30px;
padding-right: 10px;
padding-bottom: 30px;
padding-left: 10px;
/* shorthand: top right bottom left (clockwise) */
padding: 30px 10px 30px 10px;Con dos valores, padding: 30px 10px establece superior/inferior en 30px e izquierda/derecha en 10px. Usa la forma explícita padding-top cuando solo quieras cambiar el lado superior y dejar los demás sin modificar. Consulta también padding-bottom para el lado opuesto.
Cómo afecta padding-top al tamaño del elemento
De forma predeterminada (box-sizing: content-box), el relleno se añade encima del height declarado. Un elemento con height: 100px y padding-top: 30px se renderiza con 130px de alto. Si estableces box-sizing: border-box, el relleno se dibuja dentro de la altura declarada, de modo que el elemento mantiene 100px de alto y el área de contenido se reduce. Esta es una fuente frecuente de errores del tipo "¿por qué mi caja es demasiado alta?".