Padding

¿Qué es padding?

El padding en CSS se refiere al espacio interno alrededor del contenido de un elemento HTML. En otras palabras, es el espacio que se encuentra entre el contenido de un elemento (como un texto o una imagen) y su borde. El padding permite crear un espacio “respirable” dentro de los elementos, lo que mejora la legibilidad y proporciona un mejor equilibrio visual.

Diferencia entre Padding y Margin en CSS

Aunque tanto el padding como el margen en CSS se utilizan para controlar el espacio alrededor de los elementos, hay una diferencia clave entre ellos:

Padding

Se aplica al espacio interno del elemento, entre su contenido y su borde. Afecta el espacio dentro del elemento sin afectar la distancia entre elementos adyacentes.

Ejemplo práctico de padding

Supongamos que deseas crear un cuadro con un texto centrado dentro de él. Puedes usar el padding para agregar espacio interno alrededor del texto y separarlo del borde del cuadro.

<div class="cuadro">
  <p>Texto en el cuadro</p>
</div>

.cuadro {
  width: 200px;
  height: 100px;
  border: 2px solid #333;
  padding: 20px;
  text-align: center;
}

Margin

Se aplica al espacio externo del elemento, entre su borde y los elementos circundantes. Afecta el espacio entre elementos adyacentes y controla la separación entre ellos.

Ejemplo práctico de margin

Si deseas crear dos cuadros con un margen entre ellos, puedes ajustar el margen en CSS para controlar la separación entre los elementos.

<div class="rojo"></div>
<div class="azul"></div>

.rojo {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-bottom: 20px;
}

.azul {
  width: 100px;
  height: 100px;
  background-color: blue;
}

Resumen

El padding en CSS es el espacio interno alrededor del contenido de un elemento, mientras que el margen es el espacio externo entre los elementos adyacentes. Ambos son esenciales para el diseño web, pero tienen enfoques diferentes. El padding mejora la legibilidad y el equilibrio visual dentro de los elementos, mientras que el margen controla la separación entre elementos. Utilizar adecuadamente el padding puede mejorar significativamente la apariencia y la experiencia del usuario en tu sitio web.

Si has encontrado útil y te ha gustado lo que has leído, te animamos a compartirlo en las redes sociales y suscribirte a nuestra newsletter para recibir nuestras últimas novedades.

Hasta el próximo término