Propriedade CSS padding-left
Como usar a propriedade CSS padding-left para definir o espaço de preenchimento à esquerda de um elemento. Veja valores e exemplos.
A propriedade CSS padding-left define a largura da área de preenchimento no lado esquerdo de um elemento. O preenchimento (padding) é o espaço entre o conteúdo do elemento e sua borda — aumentar o padding-left empurra o conteúdo para a direita, afastando-o da borda esquerda, sem afetar os elementos vizinhos.
Esta página aborda a sintaxe de padding-left, as unidades e palavras-chave aceitas, como as porcentagens são calculadas, como ele interage com a propriedade abreviada padding e o modelo de caixa (box model), além de exemplos executáveis.
Quando usar padding-left
Use padding-left (em vez da abreviação padding) quando precisar ajustar apenas um lado e quiser manter a regra explícita e fácil de ler — por exemplo, para recuar o texto de uma lista, deslocar um rótulo em relação a um ícone ou criar espaço respiratório à esquerda de um cartão.
Se estiver definindo os quatro lados de uma vez, prefira a abreviação padding. As propriedades individuais por lado — padding-left, padding-right, padding-top e padding-bottom — são úteis para substituir apenas um valor após a abreviação ter definido os demais.
Padding não é margin. O padding fica dentro da borda do elemento e compartilha o fundo do elemento; margin-left adiciona espaço fora da borda e é sempre transparente. Se quiser separar um elemento do seu vizinho, use margin; para empurrar o conteúdo para dentro, use padding.
Valores negativos não são permitidos. Ao contrário das margens, o padding nunca pode ser negativo.
Em elementos inline como <span>, o padding horizontal é aplicado (e é visível), mas não empurra as caixas de linha ao redor — portanto, verticalmente parece não ter efeito no layout. Para controle total, defina o elemento com display: inline-block ou display: block.
Como o padding-left afeta o modelo de caixa
Por padrão, o navegador usa o modelo de caixa CSS padrão, onde a largura renderizada de um elemento é seu width mais o padding esquerdo e direito mais as bordas. Portanto, adicionar padding-left: 100px torna o elemento 100px mais largo no total.
Se quiser que o padding seja incluído dentro da width declarada em vez de ser adicionado a ela, defina box-sizing: border-box. Essa é a causa mais comum de "meu layout transbordou quando adicionei padding" — border-box resolve isso.
| Valor Inicial | 0 |
|---|---|
| Aplica-se a | Todos os elementos, com 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. |
| Herança | Não. |
| Animável | Sim. O espaço de preenchimento é animável. |
| Versão | CSS1 |
| Sintaxe DOM | object.style.paddingLeft = "40px"; |
Sintaxe
Sintaxe da propriedade CSS padding-left
padding-left: length | percentage | initial | inherit;O valor mais comum é um comprimento fixo (px, em, rem, cm, …) ou uma porcentagem. As porcentagens são resolvidas em relação à largura do bloco contentor — tanto para o padding esquerdo/direito quanto para o superior/inferior — portanto, um padding percentual responsivo escala com a largura do contêiner.
Exemplo com valor em px
Um valor fixo em pixels é a escolha mais previsível. Aqui, padding-left: 100px empurra o texto do parágrafo 100px a partir da borda esquerda:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-left: 100px;
}
</style>
</head>
<body>
<h2>Padding-left property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Resultado
Exemplo com valor em cm
Qualquer unidade de comprimento absoluto funciona da mesma forma. Aqui o padding é fornecido em centímetros:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-left: 3cm;
}
</style>
</head>
<body>
<h2>Padding-left property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Exemplo com valor em porcentagem
Uma porcentagem é relativa à largura do bloco contentor, portanto o recuo cresce e diminui com o layout. Note que a abreviação padding: 20px é declarada primeiro e depois padding-left: 15% substitui apenas o lado esquerdo:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 3px solid #cccccc;
color: deepskyblue;
padding: 20px;
padding-left: 15%;
}
</style>
</head>
<body>
<h2>Padding-left property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Valores
| Valor | Descrição | Experimente |
|---|---|---|
| length | Define o padding esquerdo como um comprimento fixo (px, pt, em, rem, cm, etc.). O padrão é 0. Comprimentos negativos são inválidos. | Experimente » |
| % | Define o padding esquerdo como uma porcentagem da largura do bloco contentor. | Experimente » |
| initial | Redefine a propriedade para seu valor padrão (0). | Experimente » |
| inherit | Utiliza o padding-left calculado do elemento pai. (O padding não é herdado por padrão.) |
Propriedades relacionadas
padding— a abreviação que define os quatro lados de uma vez.padding-right,padding-top,padding-bottom— as outras propriedades individuais por lado.margin-left— adiciona espaço fora da borda em vez de dentro dela.box-sizing— controla se o padding é adicionado ou incluído dentro dawidthdo elemento.display— afeta como o padding horizontal se comporta em elementos inline vs. block.