19-Relleno (Padding) en CSS: Mejora la Separación 📦

---

Temas de Relleno en CSS

• CSS Padding
• Padding - Lados individuales
• Padding - Propiedad de mano corta
• Padding y Anchura del Elemento

---

CSS Padding

En CSS, el relleno o padding es el espacio entre el contenido de un elemento y su borde. Puedes establecer el relleno en cada lado de un elemento (superior, derecho, inferior, izquierdo) de manera individual, o usar la propiedad de mano corta para aplicar todos los rellenos en una sola declaración.

Ejemplo 1: Relleno uniforme

Ejemplo 1: Relleno uniforme de 20px en todos los lados.

Este es un ejemplo de un div con relleno de 20px en todos sus lados. Puedes ver cómo el contenido se aleja del borde del div.

---

Padding - Lados individuales

En CSS, el padding o relleno puede ser aplicado de manera individual a cada lado de un elemento utilizando las propiedades específicas de cada lado. Las propiedades para cada lado son:

• padding-top - Establece el relleno superior del elemento.
• padding-right - Establece el relleno derecho del elemento.
• padding-bottom - Establece el relleno inferior del elemento.
• padding-left - Establece el relleno izquierdo del elemento.

Al igual que con el margen, estas propiedades pueden tener los siguientes valores:

• longitud - Especifica el relleno en unidades como px, pt, cm, etc.
• % - Especifica un relleno en porcentaje de la anchura del elemento contenedor.
• inherit - Especifica que el relleno debe heredarse del elemento padre.

Nota: Los valores negativos no están permitidos para el relleno, ya que siempre debe haber espacio entre el contenido y el borde del elemento.

Ejemplo 2: Relleno en lados específicos

Ejemplo 2: Relleno en lados específicos.

Este div tiene relleno diferente en cada uno de sus lados: superior de 20px, derecho de 30px, inferior de 10px y izquierdo de 40px.

---

Padding - Propiedad de mano corta

La propiedad padding es una propiedad abreviada que te permite establecer todos los valores de relleno (top, right, bottom, left) en una sola línea. Esta propiedad es útil para acortar el código, ya que puedes especificar los valores de los cuatro lados de un elemento en una sola declaración, en lugar de escribir varias propiedades de relleno para cada lado.

La sintaxis para la propiedad abreviada es la siguiente:

padding: top right bottom left;

Dependiendo de cuántos valores proporciones, se aplicarán de la siguiente forma:

• Cuatro valores (por ejemplo, padding: 25px 50px 75px 100px;):
  • El relleno superior es de 25px.
  • El relleno derecho es de 50px.
  • El relleno inferior es de 75px.
  • El relleno izquierdo es de 100px.
• Tres valores (por ejemplo, padding: 25px 50px 75px;): El valor superior se aplica al relleno superior, el segundo valor se aplica a los rellenos derecho e izquierdo, y el tercero al relleno inferior.
• Dos valores (por ejemplo, padding: 25px 50px;): El primer valor se aplica al relleno superior e inferior, y el segundo valor a los rellenos derecho e izquierdo.
• Un solo valor (por ejemplo, padding: 25px;): Se aplica el mismo relleno a los cuatro lados.

Ejemplo: Si deseas un relleno de 20px en la parte superior, 30px en la derecha, 40px en la parte inferior, y 50px en la izquierda, usarías:

padding: 20px 30px 40px 50px;

Ejemplo 3: Propiedad de mano corta

Ejemplo 3: Propiedad de mano corta (shorthand).

Este div tiene relleno de 10px arriba, 20px a la derecha, 30px abajo y 40px a la izquierda, usando la propiedad abreviada.

---

Padding y Anchura del Elemento

Cuando aplicas un relleno a un elemento, este puede afectar a su ancho total. El relleno se suma al tamaño del contenido del elemento. Esto puede hacer que el elemento se vuelva más grande de lo esperado, ya que el relleno es parte del tamaño total del elemento.

Si deseas evitar que el relleno haga que el tamaño del elemento aumente más allá de su contenedor, puedes usar la propiedad box-sizing: border-box;, lo que incluye el relleno y el borde dentro del tamaño del elemento.

Ejemplo: El siguiente ejemplo muestra cómo el relleno afecta al tamaño del elemento:

box-sizing: content-box; /* valor por defecto */
padding: 10px;
width: 100px;

Con content-box, el relleno se añade al ancho del elemento, por lo que el ancho total sería 120px (100px de ancho más 10px de relleno a cada lado).

Con box-sizing: border-box;, el relleno se incluye dentro del tamaño especificado:

box-sizing: border-box;
padding: 10px;
width: 100px;

El ancho total del elemento seguiría siendo 100px, ya que el relleno se incluye dentro del mismo.

Ejemplo 4: Padding con box-sizing

Ejemplo 4: Padding con box-sizing: border-box aplicado.

Este div tiene un relleno de 20px y un ancho de 200px. Con box-sizing: border-box, el relleno está incluido en el ancho total.

---

Propiedades de Padding en CSS

Ejemplo: Tabla Responsive con todas las propiedades de padding en CSS.

Propiedad	Descripción	Valor Ejemplo
padding	Establece el relleno en los 4 lados del elemento con un solo valor.	padding: 20px;
padding-top	Establece el relleno solo en la parte superior del elemento.	padding-top: 20px;
padding-right	Establece el relleno solo en el lado derecho del elemento.	padding-right: 30px;
padding-bottom	Establece el relleno solo en la parte inferior del elemento.	padding-bottom: 40px;
padding-left	Establece el relleno solo en el lado izquierdo del elemento.	padding-left: 50px;
padding abreviado	Usa la propiedad abreviada para establecer rellenos en los 4 lados con diferentes valores.	padding: 10px 20px 30px 40px;

---

Ir al índice

---

---