En este artículo, aprenderemos cómo configurar el relleno alrededor de un elemento usando CSS.
Enfoque: El relleno es el espacio entre el contenido del elemento y sus límites. Podemos configurar el relleno alrededor de un elemento usando la propiedad de relleno del CSS. Toma cuatro valores top_padding, right_padding, bottom_padding y left_padding.
Sintaxis:
padding: top_padding right_padding bottom_padding left_padding;
También podemos usar estos valores individualmente como propiedad que toma un valor a la vez.
Sintaxis:
padding-top: value; padding-right: value; padding-left: value; padding-bottom: value;
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.gfg1{
width: 50%;
font-size: 30px;
border: solid 2px red;
padding: 20px 20px 30px 30px;
}
</style>
</head>
<body>
<div class="gfg1">GeeksforGeeks</div>
</body>
</html>
Producción:
- Antes de aplicar la propiedad de relleno:
- Después de aplicar la propiedad de relleno:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.gfg1{
width: 50%;
font-size: 30px;
border: solid 2px red;
padding-top: 40px;
padding-left: 40px;
padding-bottom: 20px;
padding-right: 20px;
}
</style>
</head>
<body>
<div class="gfg1">GeeksforGeeks</div>
</body>
</html>
Producción:
- Antes de aplicar la propiedad de relleno:
- Después de aplicar la propiedad de relleno:
Publicación traducida automáticamente
Artículo escrito por nikhilchhipa9 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA