Día 23: Padding CSS

---

El padding(relleno) se utiliza para crear espacios alrededor del contenido de un elemento, dentro de los bordes definidos.

---

Padding CSS

Las propiedades padding se utilizan para generar espacios alrededor del contenido de un elemento, dentro de los bordes definidos.

Con CSS, tienes control total sobre el relleno. Hay propiedades para configurar el relleno para cada lado de un elemento (top, right, bottom y left)

---

Padding - lados individuales

CSS tiene propiedades para especificar el relleno para cada lado de un elemento:

• padding-top

• padding-right

• padding-bottom

• padding-left

Todas las propiedades padding pueden tener los siguientes valores:

• longitud - especifica un margen en px, pt, cm, etc.

• % - especifica un margen en % del ancho del elemento contenedor

• heredado - especifica que el margen debe ser heredado del elemento padre

Tip: Los valores negativos están permitidos.

Ejemplo:

Establezca un relleno diferente para los cuatro lados del elemento <div>:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

---

Padding - propiedad abreviada

Para reducir el código, es posible especificar todas las propiedades padding en una sola propiedad.

La propiedad padding es una propiedad abreviada para las siguientes propiedades de margen individuales:

• padding-top

• padding-right

• padding-bottom

• padding-left

Pues así es como funciona:

Si la propiedad padding tiene cuatro valores:

• padding: 25px 50px 75px 100px;

  • relleno superior es 25px

  • relleno derecho es 50px

  • relleno inferior es 75px

  • relleno izquierdo es 100px

Ejemplo:

div {
  padding: 25px 50px 75px 100px;
}

Si la propiedad padding tiene tres valores:

• padding: 25px 50px 75px;

  • relleno superior será 25px

  • relleno derecho e izquierdo será 50px

  • relleno inferior será 75px

Ejemplo:

p {
  padding: 25px 50px 75px;
}

Si la propiedad padding tiene dos valores:

• padding: 25px 50px;

  • relleno superior e inferior será 25px

  • relleno derecho e izquierdo será 50px

Ejemplo:

p {
  padding: 25px 50px;
}

Si la propiedad padding tiene un solo valor:

• padding: 25px;

  • todos los rellenos serán de 25px

Ejemplo:

p {
  padding: 25px;
}

---

Padding y ancho del elemento

La propiedad width CSS especifica el ancho del área de contenido del elemento. El área de contenido es la porción dentro del relleno, el borde y el margen de un elemento (modelo de caja).

Entonces, si un elemento tiene un ancho específico, el relleno agregado a ese elemento se agregará al ancho total del elemento. Esto es a menudo un resultado indeseable.

Ejemplo:

Aquí, el elemento <div> tiene un ancho de 300px. Sin embargo, el ancho real del elemento <div> será de 350px (300px + 25px relleno izquierdo + 25px relleno derecho):

div {
  width: 300px;
  padding: 25px;
}

Para mantener el ancho en 300px, sin importar la cantidad de relleno, puedes usar la propiedad box-sizing. Esto hace que el elemento mantenga su ancho real; si aumenta el relleno, el espacio de contenido disponible disminuirá.

Ejemplo:

Use la propiedad box-sizing para mantener el ancho en 300px, sin importar la cantidad de relleno:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

---

Todas las propiedades padding

---

Resumen

La propiedad CSS padding se utiliza para generar espacios alrededor del contenido de un elemento, dentro de los bordes definidos. Hay propiedades para configurar el relleno para cada lado de un elemento. Para reducir el código, es posible especificar todas las propiedades padding en una sola propiedad. La propiedad width CSS especifica el ancho del área de contenido del elemento. Si un elemento tiene un ancho específico, el relleno agregado a ese elemento se agregará al ancho total del elemento, pero se puede usar la propiedad box-sizing para mantener el ancho en un valor específico.

---

Traducido con 💚 desde W3Schools.com