Propiedad "padding" en CSS

En CSS, la propiedad padding se utiliza para agregar espacio interno alrededor del contenido de un elemento. Es útil para separar el contenido de los bordes de un elemento y mejorar la legibilidad y el aspecto visual.

¿Qué es la propiedad "padding"?

La propiedad padding en CSS define el espacio interno alrededor del contenido de un elemento. Se puede aplicar a los cuatro lados de un elemento (arriba, derecha, abajo, izquierda) o de forma individual.

Ejemplo de Uso

Veamos un ejemplo de cómo se utiliza la propiedad padding en CSS:

<div class="caja">
  Esto es una caja con relleno.
</div>
  

Y el CSS correspondiente:

.caja {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  padding: 20px;
  border: 2px solid #333;
}

En este ejemplo, hemos creado una caja con la clase .caja y le hemos aplicado un relleno de 20px en todos los lados. Esto significa que hay un espacio de 20px entre el contenido de la caja y sus bordes.

Valores de la Propiedad "padding"

La propiedad padding puede tener varios valores:

• padding: 10px; - Todos los lados tienen un relleno de 10px.
• padding: 10px 20px; - El relleno superior e inferior es de 10px, y el relleno izquierdo y derecho es de 20px.
• padding: 10px 20px 30px; - El relleno superior es de 10px, el relleno izquierdo y derecho es de 20px, y el relleno inferior es de 30px.
• padding: 10px 20px 30px 40px; - El relleno superior es de 10px, el relleno derecho es de 20px, el relleno inferior es de 30px, y el relleno izquierdo es de 40px.