El relleno es el espacio entre el elemento y su borde. La propiedad abreviada de relleno establece el área de relleno en los cuatro lados del elemento. El valor de relleno puede estar en px, em, rem o %. Si queremos aplicar relleno en un lado específico, podemos usar las siguientes propiedades:
- padding-left : establece el relleno en el lado izquierdo del elemento.
- padding-right : establece el relleno en el lado derecho del elemento.
- padding-top : establece el relleno en la parte superior del elemento.
- padding-bottom : establece el relleno en la parte inferior del elemento.
Sintaxis:
padding: value;
Diferentes rellenos verticales y horizontales:
padding: value1 value2;
- value1: establece el valor de relleno en los lados superior e inferior del elemento.
- value2: establece el valor de relleno en los lados derecho e izquierdo del elemento.
Acolchado superior, horizontal e inferior diferente:
padding: value1 value2 value3;
- value1: establece el relleno en la parte superior del elemento.
- value2: Establece el relleno en el lado derecho e izquierdo del elemento.
- value3: establece el relleno en la parte inferior del elemento.
Acolchado diferente en los cuatro lados:
padding: value1 value2 value3 value4;
- value1: establece el relleno en la parte superior del elemento.
- value2: establece el relleno en el lado derecho del elemento.
- value3: establece el relleno en la parte inferior del elemento.
- value4: establece el relleno en el lado izquierdo del elemento.
Ejemplo 1: relleno con solo 1 valor
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
h1{
width: fit-content;
border: 4px solid #308D46;
color: #308D46;
padding: 20px;
}
</style>
</head>
<body>
<h1> GeeksforGeeks</h1>
</body>
</html>
Producción:
Ejemplo 2: relleno con dos valores
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
h1{
width: fit-content;
border: 4px solid #308D46;
color: #308D46;
padding: 5px 40px;
}
</style>
</head>
<body>
<h1> GeeksforGeeks</h1>
</body>
</html>
Producción:
Ejemplo 3: relleno con tres valores
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
h1{
width: fit-content;
border: 4px solid #308D46;
color: #308D46;
padding: 5px 40px 30px;
}
</style>
</head>
<body>
<h1> GeeksforGeeks</h1>
</body>
</html>
Producción:
Ejemplo 4: relleno con cuatro valores
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
h1{
width: fit-content;
border: 4px solid #308D46;
color: #308D46;
padding: 15px 40px 45px 5px;
}
</style>
</head>
<body>
<h1> GeeksforGeeks</h1>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por pritishnagpal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA