Propriedade CSS padding-top
Como usar a propriedade CSS padding-top para definir o espaço de preenchimento no topo de um elemento. Veja os valores e exemplos.
A propriedade CSS padding-top define a altura da área de preenchimento no lado superior de um elemento — o espaço entre o conteúdo do elemento (ou sua borda superior) e o conteúdo acima dele dentro da caixa.
O padding é a camada mais interna do modelo de caixa CSS: de dentro para fora temos o conteúdo, depois o padding, depois a borda e depois a margem. Ao contrário da margem, o padding fica dentro do elemento, portanto compartilha a cor de fundo do elemento e faz parte da área clicável/visível.
Use padding-top quando quiser empurrar o conteúdo para baixo a partir da borda superior do seu contêiner — por exemplo, para dar espaço de respiro a um título abaixo da borda superior de um cartão, ou para adicionar ritmo vertical dentro de um botão ou destaque sem afetar o espaçamento entre elementos separados (isso é função da margem).
Valores negativos não são válidos. Se precisar puxar o conteúdo para cima, use um margin-top negativo.
Esta propriedade não afeta visivelmente elementos inline como <span> — o padding vertical em uma caixa inline não altera a altura da linha nem afasta as linhas adjacentes. Defina display: inline-block ou display: block no elemento se precisar que o padding superior tenha efeito.
| Valor Inicial | 0 |
|---|---|
| Aplica-se a | Todos os elementos, exceto quando a propriedade display é definida como table-row-group, table-header-group, table-footer-group, table-row, table-column-group e table-column. Aplica-se também a ::first-letter. |
| Herdado | Não. |
| Animável | Sim. O espaço de padding é animável. |
| Versão | CSS1 |
| Sintaxe DOM | object.style.paddingTop = "10px"; |
Sintaxe
Sintaxe da Propriedade CSS padding-top
padding-top: length | initial | inherit;Exemplo da propriedade padding-top:
Exemplo da Propriedade CSS padding-top com valor em px
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
border: 2px solid #666;
color: #8ebf42;
padding-top: 30px;
}
</style>
</head>
<body>
<h2>Padding-top property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Resultado
Exemplo da propriedade padding-top definida em "em".
Exemplo da Propriedade CSS padding-top com valor em em
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
border: 2px solid #666;
color: #8ebf42;
padding-top: 4em;
}
</style>
</head>
<body>
<h2>Padding-top property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Um valor em é relativo ao próprio font-size do elemento, portanto padding-top: 4em escala junto com o texto. Isso é útil quando você quer que o espaçamento cresça e diminua junto com a fonte.
Exemplo da propriedade padding-top especificada em porcentagem:
O valor em porcentagem é especial: ele é calculado em relação à largura do bloco contenedor, não à sua altura. Portanto, padding-top: 15% significa 15% da largura do elemento pai. Essa particularidade é a base da técnica clássica de proporção de aspecto para manter uma caixa proporcional à medida que ela é redimensionada.
Exemplo da Propriedade CSS padding-top com valor em "%":
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
border: 2px solid #cccccc;
color: #8ebf42;
padding-top: 15%;
}
</style>
</head>
<body>
<h2>Padding-top 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 superior em px, pt, cm, etc. O valor padrão é 0. | Experimente » |
| % | Define o padding superior em % da largura do elemento contenedor. | Experimente » |
| initial | Faz a propriedade usar seu valor padrão. | Experimente » |
| inherit | Herda a propriedade do elemento pai. |
padding-top vs. o shorthand padding
padding-top controla apenas um lado. Quando você define vários lados de uma vez, o shorthand padding é mais curto. Estas duas regras são equivalentes:
/* longhand */
padding-top: 30px;
padding-right: 10px;
padding-bottom: 30px;
padding-left: 10px;
/* shorthand: top right bottom left (clockwise) */
padding: 30px 10px 30px 10px;Com dois valores, padding: 30px 10px define superior/inferior como 30px e esquerda/direita como 10px. Use o longhand padding-top quando quiser alterar apenas o lado superior e deixar os outros intocados. Veja também padding-bottom para o lado oposto.
Como o padding-top afeta o tamanho do elemento
Por padrão (box-sizing: content-box), o padding é adicionado ao height declarado. Um elemento com height: 100px e padding-top: 30px é renderizado com 130px de altura. Se você definir box-sizing: border-box, o padding é desenhado dentro da altura declarada, portanto o elemento permanece com 100px de altura e a área de conteúdo encolhe. Essa é uma fonte frequente de bugs do tipo "por que minha caixa está alta demais".