Propiedad padding-right de CSS

La propiedad CSS padding-right establece el espacio de relleno en el lado derecho de un elemento.

INFO

Los valores negativos no son válidos.

INFO

Esta propiedad no tiene ningún efecto en elementos en línea, como <span>.

Valor inicial	0
Se aplica a	Todos los elementos. Se hace una excepción cuando la propiedad display está configurada como table-row-group, table-header-group, table-footer-group, table-row, table-column-group y table-column. También se aplica a ::first-letter.
Heredado	No.
Animable	Sí. El espacio de relleno es animable.
Versión	CSS1
Sintaxis DOM	object.style.paddingRight = "40px";

TIP

Con la ayuda de la propiedad padding puedes establecer rellenos en todos los lados de un elemento con una sola declaración.

Sintaxis

Sintaxis de la propiedad CSS padding-right

css

padding-right: length | initial | inherit;

Ejemplo de la propiedad padding-right:

Ejemplo de la propiedad CSS padding-right con valor en px

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 2px solid #000;
        color: #8ebf42;
        padding-right: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Padding-right property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</p>
  </body>
</html>

Try it Yourself »

Resultado

Propiedad CSS padding-right

Ejemplo de la propiedad padding-right con el valor "length":

Ejemplo de la propiedad CSS padding-right con valor en pt

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 2px solid #000;
        color: #8ebf42;
        padding-right: 100pt;
      }
    </style>
  </head>
  <body>
    <h2>Padding-right property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
  </body>
</html>

Try it Yourself »

Ejemplo de la propiedad padding-right especificada en porcentaje:

Ejemplo de la propiedad CSS padding-right con valor en %:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 3px solid #cccccc;
        color: deepskyblue;
        padding: 15px;
        padding-right: 10%;
      }
    </style>
  </head>
  <body>
    <h2>Padding-left property example</h2>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </p>
  </body>
</html>

Try it Yourself »

Valores

Valor	Descripción	Probarlo
length	Establece el relleno derecho en px, pt, cm, etc. Su valor predeterminado es 0px.	Probarlo »
%	Establece el relleno derecho en porcentaje del ancho del elemento contenedor.	Probarlo »
initial	Hace que la propiedad use su valor predeterminado.	Probarlo »
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Cuál es la función de la propiedad padding-right en CSS?

Establece el margen derecho de un elemento.Establece el relleno (espacio) derecho de un elemento.Cambia el color del borde derecho de un elemento.Se utiliza para manipular la posición del borde derecho de un contenedor hacia o lejos de su contenido.

Propiedad padding-right de CSS ​

Sintaxis ​

Ejemplo de la propiedad padding-right: ​

Resultado ​

Ejemplo de la propiedad padding-right con el valor "length": ​

Ejemplo de la propiedad padding-right especificada en porcentaje: ​

Valores ​

Práctica ​

Propiedad padding-right de CSS

Sintaxis

Ejemplo de la propiedad padding-right:

Resultado

Ejemplo de la propiedad padding-right con el valor "length":

Ejemplo de la propiedad padding-right especificada en porcentaje:

Valores

Práctica