19-Relleno (padding) en css

La propriedad padding se usa para crear espacio al rededor del elemento html dentro de los bordes defenidos

Este elemento tiene un relleno de 70px

Tambien esta propriedad puede tener solo relleno por los lados con las seguientes propriedades:

• padding-top
• padding-right
• padding-bottom
• padding-left

Todas las propiedades de relleno pueden tener los siguientes valores:

• longitud : especifica un relleno en px, pt, cm, etc.
• % - especifica un relleno en % del ancho del elemento contenedor
• heredar: especifica que el relleno se debe heredar del elemento principal

---

...

Nota para el relleno los numeros negativos estan proibidos, o sea no se pueden usar numeros negativos en los rellenos

Este elemento div tiene un relleno superior de 50 px, un relleno derecho de 30 px, un relleno inferior de 50 px y un relleno izquierdo de 80 px.

---

Relleno - Propiedad abreviada

Para acortar el código, es posible especificar todas las propiedades de relleno en una propiedad

la propriedd padding es una propiedad abreviada para el siguiente individuo propiedades de relleno

• padding-top
• padding-right
• padding-bottom
• padding-left

Si la propriedad padding tiene 4 vvalores

• relleno: 25px 50px 75px 100px;
• el relleno superior es 25px
• el relleno derecho es 50px
• el relleno inferior es 75px
• el relleno izquierdo es 100px

Ejemplo

Utilice la propiedad abreviada padding con cuatro valores:

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

Este elemento div tiene un relleno superior de 25 px, un relleno derecho de 50 px, un relleno inferior de 75 px y un relleno izquierdo de 100 px.

Si el paddingpropiedad tiene tres valores:

Ejemplo

Utilice la propiedad abreviada padding con cuatro valores:

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

Este elemento div tiene un relleno superior de 25 px, un relleno derecho de 50 px, un relleno inferior de 75 px;

Utilice la propiedad abreviada padding con dos valores:

Ejemplo

Utilice la propiedad abreviada padding con cuatro valores:

    div {
        padding: 25px 50px;
      }

Este elemento div tiene un relleno superior y inferior de 25 px, un relleno derecho y esquierdo de 50 px;

Si el paddingpropiedad tiene un valor:

Ejemplo

Utilice la propiedad abreviada padding con cuatro valores:

    div {
        padding: 25px;
      }

Este elemento div tiene un relleno de 25 px por todos los lados;

---

width and padding

Los valores de ancho y relleno se deben juntar

Ejemplo: si tenemos una area de 300 px y querems un relleno de 50px, entonces la area total sera de 350px

Lo mismo con height (altura)

ejemplo

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

Este elemento div tiene un anchura de 300px y un relleno de 50px; Su ancura total es de 350px

Para mantener la anchura del elemento se utiliza la propriedad box-sizing

Con esta propriedad la anchura se mantiene pero el elemento disminui

codigo

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

Este elemento div tiene un anchura de 300px un relleno de 25px, pero su anchura se mantiene;

---

Ir al indice

---