Propiedad padding de CSS
La propiedad padding se utiliza para crear espacio de relleno en todos los lados del contenido de un elemento.
Los valores de padding se establecen utilizando longitudes o porcentajes.
INFO
Los valores negativos no son válidos.
La propiedad padding de CSS es una abreviatura de las siguientes propiedades:
Podemos usar la propiedad padding para todos los lados (superior, inferior, izquierdo, derecho).
La propiedad padding puede definirse con uno, dos, tres o cuatro valores:
- Cuando se especifican cuatro valores, el primero establece el lado superior, el segundo el lado derecho, el tercero el lado inferior y el cuarto el lado izquierdo.
- Cuando se especifican tres valores, el primero establece el lado superior, el segundo establece los lados derecho e izquierdo, y el tercero establece el lado inferior.
- Cuando se especifican dos valores, el primero establece los lados superior e inferior y el segundo establece los lados derecho e izquierdo.
- Si el padding tiene solo un valor, se aplica a los cuatro lados.
| 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.padding = "30px"; |
Sintaxis
Sintaxis de la propiedad padding de CSS
padding: length | initial | inherit;Ejemplo de la propiedad padding:
Ejemplo de la propiedad padding de CSS con cuatro valores
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 15px 30px 20px 40px;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>En el ejemplo dado, este código significa que el padding en el lado superior debe ser 15px, en el lado derecho 30px, en el lado inferior 20px y en el lado izquierdo 40px.
Ejemplo de la propiedad padding con el valor "%":
Ejemplo de la propiedad padding de CSS con valor %
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 5% 10% 10% 5%;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>En el siguiente ejemplo se especifican dos valores. El primer valor establece los lados superior e inferior y el segundo valor establece los lados derecho e izquierdo:
Ejemplo de la propiedad padding con dos valores:
Ejemplo de la propiedad padding de CSS con dos valores
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 20px 40px;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>Resultado
Valores
| Valor | Descripción | Ejecutar |
|---|---|---|
| length | Define un padding en px, pt, cm, etc. El valor predeterminado es 0. | Ejecutar » |
| % | Establece el padding en % del elemento contenedor. | Ejecutar » |
| initial | Hace que la propiedad use su valor predeterminado. | Ejecutar » |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Cuáles son las funciones del padding en CSS?