Padding CSS
La propiedad CSS padding se utiliza para crear espacio alrededor del contenido de un elemento. CSS proporciona diferentes propiedades, con las cuales puedes establecer el padding para cada lado de un elemento (derecho, izquierdo, superior e inferior).
Los lados individuales
Con la ayuda de las siguientes propiedades puedes establecer el padding para cada lado de un elemento:
Como puedes imaginar, para la parte superior usamos padding-top, para la inferior padding-bottom, para el lado izquierdo padding-left y para el derecho padding-right.
Todas las propiedades de padding pueden tener los siguientes valores:
- length, que se utiliza para especificar un padding en px, pt, cm, etc.,
- %, que especifica un padding en % del ancho del elemento contenedor,
- inherit, que especifica que el padding debe heredarse de su elemento padre.
Ten en cuenta que la propiedad CSS padding no puede aceptar valores negativos. Su valor predeterminado para todas las propiedades de padding es 0.
Ejemplo de las propiedades de padding individuales:
Ejemplo de uso de las propiedades de padding individuales:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: yellow;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Individual padding properties</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..
</div>
</body>
</html>Padding como propiedad abreviada
La propiedad CSS padding es una propiedad abreviada para las siguientes propiedades de padding individuales:
En los casos en que la propiedad padding tiene solo 1 valor, por ejemplo padding: 35px, los cuatro paddings son de 35px.
Ejemplo de la propiedad abreviada padding con un valor:
Ejemplo de la propiedad abreviada padding con un valor:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: green;
padding: 35px;
}
</style>
</head>
<body>
<h2>Individual padding properties</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>La propiedad padding puede tener 2 valores, por ejemplo padding: 20px 40px, donde los paddings superior e inferior son de 20px, y los paddings derecho e izquierdo son de 40px.
Ejemplo de padding CSS con 2 valores
p {
padding: 20px 40px;
}Esto es equivalente al código anterior.
Ejemplo de padding CSS con 2 valores, forma larga, código
p {
padding-top: 20px;
padding-right: 40px;
padding-bottom: 20px;
padding-left: 40px;
}Ejemplo de la propiedad abreviada padding con dos valores:
Código de ejemplo de padding CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: white;
padding: 20px 40px;
}
</style>
</head>
<body>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>Resultado
La propiedad padding puede tener 3 valores, por ejemplo, padding: 20px 15px 35px;, donde el padding superior es de 20px, los paddings derecho e izquierdo son de 15px y el padding inferior es de 35px.
Ejemplo de padding CSS con 3 valores, código
p {
padding: 20px 15px 35px;
}Esto es equivalente al código anterior.
Ejemplo de padding CSS con 3 valores, forma larga, código
p {
padding-top: 20px;
padding-right: 15px;
padding-bottom: 35px;
padding-left: 15px;
}Ejemplo de la propiedad abreviada padding con tres valores:
Ejemplo de la propiedad abreviada padding con tres valores:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: lightblue;
padding: 20px 15px 35px;
}
</style>
</head>
<body>
<h2>Example of the padding shorthand property</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>Y finalmente, la propiedad padding puede tener cuatro valores, por ejemplo padding: 25px 50px 75px 100px;, donde el padding superior es de 25px, el derecho es de 50px, el inferior es de 75px y el izquierdo es de 100px.
Ejemplo de padding CSS
p {
padding: 25px 50px 75px 100px;
}Ejemplo de la propiedad abreviada padding con cuatro valores:
Ejemplo de la propiedad abreviada padding con cuatro valores:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #95e5f7;
padding: 25px 50px 75px 100px;
}
</style>
</head>
<body>
<h2>Example of the padding shorthand property</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>Práctica
¿Qué describe correctamente la propiedad 'padding' en CSS?