La propiedad CSS padding se utilizan para generar espacio alrededor del contenido de un elemento, dentro de los bordes definidos. Con CSS, tienes control total sobre el relleno. Hay propiedades para establecer el relleno para cada lado de un elemento (superior, derecho, inferior e izquierdo).
Padding – lados individuales
CSS tiene propiedades para especificar el relleno para cada lado de un elemento:
- padding-top
- padding-right
- padding-bottom
- padding-left
Las propiedades pueden tener los siguientes valores:
- longitud: especifica un padding en px, pt, cm…
- % (porcentaje): especifica un relleno en % del ancho del elemento contenedor
- inherit: especifica que el relleno (padding) se debe heredar del elemento padre
Nota: los valores negativos no están permitidos.
padding – forma corta
Para acortar el código, es posible especificar todas las propiedades padding en una propiedad. La propiedad padding es una propiedad abreviada para las siguientes propiedades de relleno individuales:
Ejm
div {
padding: 25px 50px 75px 100px;
}
div {
padding: 25px 50px 75px;
}
div {
padding: 25px 50px;
}
div {
padding: 25px;
}Relleno y ancho del elemento
La propiedad CSS width especifica el ancho del área de contenido del elemento. El área de contenido es la porción dentro del relleno, el borde y el margen de un elemento (el modelo de caja).
Entonces, si un elemento tiene un ancho específico, el relleno agregado a ese elemento se agregará al ancho total del elemento. Esto es a menudo un resultado indeseable.
Para mantener un ancho en 300px, por ejm, sin importar la cantidad de relleno, puedes usar la propiedad de box-sizing. Esto hace que el elemento mantenga su ancho real, si aumentas el relleno, el espacio de contenido disponible disminuirá.
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 300px;
background-color: yellow;
}
div.ex2 {
width: 300px;
padding: 25px;
box-sizing: border-box;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Padding and element width - with box-sizing</h2>
<div class="ex1">This div is 300px wide.</div>
<br>
<div class="ex2">El ancho de este div permanece en 300px,
a pesar de los 50px de relleno total izquierdo y derecho,
debido a la propiedad box-sizing: border-box.
</div>
</body>
</html>