Propriedade CSS padding-right
Como usar a propriedade CSS padding-right para definir o espaço de preenchimento à direita de um elemento. Veja os valores e exemplos.
A propriedade CSS padding-right define a largura da área de preenchimento no lado direito de um elemento. O preenchimento (padding) é o espaço transparente entre o conteúdo de um elemento e sua borda, portanto aumentar o padding-right afasta a borda direita do conteúdo (o próprio conteúdo permanece no lugar; o elemento fica mais largo a menos que box-sizing seja definido como border-box).
Esta página aborda os valores aceitos (comprimentos, percentagens e palavras-chave globais de CSS), como o preenchimento em percentagem é calculado e exemplos executáveis para cada caso. Para definir apenas o preenchimento direito, use padding-right; para definir os quatro lados de uma vez, use o atalho padding.
Valores negativos não são válidos.
Esta propriedade não tem nenhum efeito em elementos inline, como <span>.
| Valor Inicial | 0 |
|---|---|
| Aplica-se a | Todos os elementos. Há uma exceção quando a propriedade display é definida como table-row-group, table-header-group, table-footer-group, table-row, table-column-group e table-column. Também se aplica a ::first-letter. |
| Herdado | Não. |
| Animável | Sim. O espaço de preenchimento é animável. |
| Versão | CSS1 |
| Sintaxe DOM | object.style.paddingRight = "40px"; |
Com a ajuda da propriedade padding você pode definir preenchimentos em todos os lados de um elemento com uma única declaração.
Sintaxe
Sintaxe da Propriedade CSS padding-right
padding-right: length | initial | inherit;Exemplo da propriedade padding-right:
Exemplo da Propriedade CSS padding-right com valor em 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
Exemplo da propriedade padding-right com o valor "length":
Exemplo da Propriedade CSS padding-right com valor em 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>Exemplo da propriedade padding-right especificada em percentagem:
Exemplo da propriedade CSS padding-right com valor em %:
Um valor em percentagem é resolvido em relação à largura do bloco contentor do elemento, não à sua altura. Isso significa que o preenchimento direito escala conforme o layout fica mais largo ou mais estreito, o que é útil para espaçamento fluido e responsivo.
<!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 | Descrição | Experimente |
|---|---|---|
| length | Define o preenchimento direito em px, pt, cm, etc. O valor padrão é 0px. | Experimente » |
| % | Define o preenchimento direito em percentagem da largura do elemento contentor. | Experimente » |
| initial | Faz a propriedade usar seu valor padrão. | Experimente » |
| inherit | Herda a propriedade de seu elemento pai. |
Quando usar padding-right
Use padding-right quando precisar de espaço apenas na borda direita de uma caixa — por exemplo, para manter o texto afastado de um ícone à direita, para deixar espaço para uma barra de rolagem ou para equilibrar espaçamentos assimétricos em um cartão. Se precisar de espaçamento igual em todos os lados, prefira o atalho padding; se precisar do espaço fora da borda em vez de dentro dela, use margin-right.
Algumas coisas que vale lembrar:
- O preenchimento faz parte da área clicável/de fundo. A cor de fundo e a imagem de fundo do elemento se estendem pelo preenchimento, ao contrário da margem.
- Valores negativos são inválidos. Para puxar o conteúdo para o outro lado, use uma
marginnegativa. - Por padrão, ele alarga a caixa. Com o modelo padrão
content-box, opadding-righté adicionado à largura total do elemento. Definabox-sizing: border-boxpara manter a largura declarada fixa e absorver o preenchimento internamente.
Propriedades relacionadas
padding-left— preenchimento no lado opostopadding-topepadding-bottompadding— atalho para os quatro ladosmargin-right— espaço fora da borda