Propiedad CSS padding-right
Cómo usar la propiedad CSS padding-right para definir el espacio de relleno a la derecha de un elemento. Ver valores y ejemplos.
La propiedad CSS padding-right establece el ancho del área de relleno en el lado derecho de un elemento. El relleno es el espacio transparente entre el contenido de un elemento y su borde, por lo que aumentar padding-right aleja el borde derecho del contenido (el contenido en sí permanece en su lugar; el elemento se vuelve más ancho a menos que box-sizing esté establecido en border-box).
Esta página cubre los valores aceptados (longitudes, porcentajes y las palabras clave globales de CSS), cómo se calcula el relleno en porcentaje, y ejemplos ejecutables para cada caso. Para establecer solo el relleno derecho usa padding-right; para establecer los cuatro lados a la vez usa la abreviación padding.
Los valores negativos no son válidos.
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 se establece en 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"; |
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
padding-right: length | initial | inherit;Ejemplo de la propiedad padding-right:
Ejemplo de la propiedad CSS padding-right con valor px
<!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>Resultado
Ejemplo de la propiedad padding-right con el valor "length":
Ejemplo de la propiedad CSS padding-right con valor pt
<!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>Ejemplo de la propiedad padding-right especificada en porcentaje:
Ejemplo de la propiedad CSS padding-right con valor %:
Un valor en porcentaje se resuelve respecto al ancho del bloque contenedor del elemento, no a su altura. Esto significa que el relleno derecho escala conforme el diseño se vuelve más ancho o más estrecho, lo cual es útil para espaciado fluido y adaptable.
<!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-right 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>Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| length | Establece el relleno derecho en px, pt, cm, etc. Su valor predeterminado es 0px. | Pruébalo » |
| % | Establece el relleno derecho en porcentaje del ancho del elemento contenedor. | Pruébalo » |
| initial | Hace que la propiedad use su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. |
Cuándo usar padding-right
Usa padding-right cuando necesitas espacio solo en el borde derecho de un cuadro — por ejemplo, para mantener el texto alejado de un icono final, para dejar espacio para una barra de desplazamiento, o para equilibrar un espaciado asimétrico en una tarjeta. Si necesitas espaciado igual en todos los lados, prefiere la abreviación padding; si necesitas el espacio fuera del borde en lugar de dentro, usa margin-right.
Algunas cosas que vale la pena recordar:
- El relleno forma parte del área clicable / de fondo. El color de fondo y la imagen de fondo del elemento se extienden a través del relleno, a diferencia del margen.
- Los valores negativos no son válidos. Para desplazar el contenido en la dirección contraria, usa un
marginnegativo. - Amplía el cuadro de forma predeterminada. Con el modelo estándar
content-box,padding-rightse suma al ancho total del elemento. Establecebox-sizing: border-boxpara mantener el ancho declarado fijo y absorber el relleno hacia adentro.
Propiedades relacionadas
padding-left— relleno en el lado opuestopadding-topypadding-bottompadding— abreviación para los cuatro ladosmargin-right— espacio fuera del borde