Propiedad padding-top de CSS
La propiedad padding-top establece el espacio de relleno en la parte superior de un elemento.
INFO
Los valores negativos no son válidos.
INFO
Esta propiedad no afecta a los elementos en línea, como <span>.
| Valor inicial | 0 |
|---|---|
| Se aplica a | Todos los elementos, excepto cuando la propiedad display está configurada como table-row-group, table-header-group, table-footer-group, table-row, table-column-group y table-column. También se aplica a ::first-letter. |
| Heredable | No. |
| Animable | Sí. El espacio de relleno es animable. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.paddingTop = "10px"; |
Sintaxis
Sintaxis de la propiedad padding-top de CSS
css
padding-top: length | initial | inherit;Ejemplo de la propiedad padding-top:
Ejemplo de la propiedad CSS padding-top con valor en píxeles (px)
html
<!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 en "em"
html
<!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>Ejemplo de la propiedad padding-top especificada en porcentaje:
Ejemplo de la propiedad CSS padding-top con valor en "%":
html
<!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 | Probarlo |
|---|---|---|
| length | Establece el relleno superior en px, pt, cm, etc. El valor predeterminado es 0. | Probarlo » |
| % | Establece el relleno superior en % del ancho del elemento contenedor. | Probarlo » |
| initial | Hace que la propiedad use su valor predeterminado. | Probarlo » |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Cuál es la función de la propiedad CSS 'padding-top'?