CSS Padding

Las paddingpropiedades CSS se utilizan para generar espacio alrededor del contenido de un elemento, dentro de cualquier borde definido.

Con CSS, tienes control total sobre el relleno. Hay propiedades para configurar el relleno para cada lado de un elemento (arriba, derecha, abajo e izquierda).

Relleno CSS

Acolchado: lados individuales

click to edit

CSS tiene propiedades para especificar el relleno para cada lado de un elemento:

padding-top

padding-right

padding-bottom

padding-left

Todas las propiedades de relleno pueden tener los siguientes valores:

longitud : especifica un relleno en px, pt, cm, etc.

% : especifica un relleno en% del ancho del elemento contenedor

heredar: especifica que el relleno debe heredarse del elemento principal

Nota: los valores negativos no están permitidos.

ejemplo

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

background-color: lightblue;

padding-top: 50px;

padding-right: 30px;

padding-bottom: 50px;

padding-left: 80px;

}

</style>

</head>

<body>

<h2>Using individual padding properties</h2>

<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.</div>

</body>

</html>