En este artículo vamos a ver cómo configurar el relleno dentro de un elemento usando CSS. El relleno se considera como el espacio entre el contenido y su borde. El relleno crea espacio dentro de los bordes definidos. La diferencia entre el relleno y el margen es que el margen crea un espacio fuera de los bordes y el relleno crea un espacio para el contenido dentro del borde (el borde es cualquier etiqueta que tiene su área asignada).
Podemos usar las siguientes propiedades para establecer el relleno dentro de un elemento.
- Propiedad CSS padding-bottom
- Propiedad CSS padding-top
- Propiedad CSS padding-right
- Propiedad CSS padding-left
Sintaxis:
/* Set padding to all sides padding: numberpx; /* Set padding to specific side padding-top: numberpx; padding-right: numberpx; padding-left: numberpx; padding-bottom: numberpx;
Enfoque: crearemos una etiqueta de botón con relleno configurado en sus varios lados usando la propiedad de relleno en CSS. A continuación se muestra el código que ilustra el uso del relleno.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
button{
padding-top: 10px;
padding-bottom: 20px;
padding-right: 30px;
padding-left: 40px;
}
</style>
</head>
<body>
<button>
GeeksforGeeks
</button>
</body>
</html>
Producción:
Explicación: aquí creamos un botón y luego usamos CSS para cambiar su propiedad de relleno de cada lado de manera diferente.
Publicación traducida automáticamente
Artículo escrito por devangj9689 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA