Propriedade CSS padding-bottom
Aprenda como a propriedade CSS padding-bottom adiciona espaço entre o conteúdo de um elemento e sua borda inferior, com valores e exemplos.
A propriedade padding-bottom define a quantidade de espaço entre o conteúdo de um elemento e sua borda inferior. Ela controla o espaçamento interno apenas no lado inferior e é uma das quatro propriedades de padding individuais, ao lado de padding-top, padding-left e padding-right.
Compreender o padding-bottom é útil sempre que você precisar de um espaçamento vertical preciso abaixo de texto ou outro conteúdo — sem afetar os elementos ao redor da forma que margin-bottom faria.
Valores negativos não são permitidos para padding-bottom. O valor mínimo é 0.
| Valor Inicial | 0 |
|---|---|
| Aplica-se a | Todos os elementos, exceto aqueles com display definido como table-row-group, table-header-group, table-footer-group, table-row, table-column-group ou table-column. Também se aplica a ::first-letter. |
| Herdado | Não |
| Animável | Sim |
| Versão | CSS1 |
| Sintaxe DOM | element.style.paddingBottom = "5%"; |
Sintaxe
padding-bottom: <length> | <percentage> | initial | inherit;A propriedade aceita um único valor. Usar a abreviação padding com quatro valores é equivalente, mas define os quatro lados ao mesmo tempo.
Valores
| Valor | Descrição |
|---|---|
<length> | Um padding inferior fixo expresso em qualquer unidade de comprimento CSS (px, em, rem, pt, cm, etc.). O valor inicial é 0. |
<percentage> | Padding inferior como porcentagem da largura (não da altura) do bloco contenedor. Isso surpreende muitos desenvolvedores — veja a nota abaixo. |
initial | Redefine a propriedade para seu valor padrão (0). |
inherit | Usa o valor computado do elemento pai. |
Valores percentuais são relativos à largura do bloco contenedor, não à sua altura. Isso vale para os quatro lados do padding e é definido pela especificação CSS. Significa que padding-bottom: 50% cria uma altura igual à metade da largura do contêiner — uma técnica usada para criar caixas com proporção de aspecto antes de a propriedade aspect-ratio existir.
Como o padding-bottom afeta o layout
padding-bottom aumenta a altura total do elemento. O cálculo exato depende do valor de box-sizing em vigor:
content-box(padrão):altura total = height + padding-top + padding-bottom + border-top + border-bottom. O valor depadding-bottomé somado àheightespecificada.border-box: aheightespecificada inclui padding e borda. Adicionarpadding-bottomreduz a área de conteúdo em vez de aumentar o elemento.
Exemplos
Valor em pixels básico
O uso mais comum — um número fixo de pixels abaixo do conteúdo:
<!DOCTYPE html>
<html>
<head>
<title>padding-bottom with px</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-bottom: 40px;
}
</style>
</head>
<body>
<h2>padding-bottom: 40px</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Valor de comprimento em centímetros
Qualquer unidade de comprimento CSS funciona. Aqui é usado 2cm, o que é útil para folhas de estilo de impressão:
<!DOCTYPE html>
<html>
<head>
<title>padding-bottom with cm</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-bottom: 2cm;
}
</style>
</head>
<body>
<h2>padding-bottom: 2cm</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Valor percentual
padding-bottom: 25% adiciona padding inferior igual a 25% da largura do bloco contenedor. Este exemplo o usa para criar um cartão visual simples com espaçamento proporcional:
<!DOCTYPE html>
<html>
<head>
<title>padding-bottom with %</title>
<style>
.card {
width: 300px;
border: 2px solid #1c87c9;
background: #e8f4fd;
padding-bottom: 25%; /* = 75px (25% of 300px) */
padding-top: 16px;
padding-left: 16px;
padding-right: 16px;
}
</style>
</head>
<body>
<div class="card">
<strong>Card title</strong>
<p>The bottom padding equals 25% of the card's width.</p>
</div>
</body>
</html>Usando em para espaçamento escalável
O padding baseado em em escala com o tamanho de fonte do elemento, mantendo as proporções intactas quando o tamanho da fonte muda:
<!DOCTYPE html>
<html>
<head>
<title>padding-bottom with em</title>
<style>
.note {
font-size: 18px;
border-left: 4px solid #1c87c9;
padding-left: 12px;
padding-bottom: 1em; /* = 18px, matches font-size */
background: #f0f8ff;
}
</style>
</head>
<body>
<div class="note">
This note box uses <code>padding-bottom: 1em</code>. If you increase
the font size, the bottom padding grows proportionally.
</div>
</body>
</html>Comparação de box-sizing
O mesmo height e padding-bottom se comportam de forma diferente com content-box versus border-box:
<!DOCTYPE html>
<html>
<head>
<title>padding-bottom and box-sizing</title>
<style>
.box {
width: 220px;
height: 80px;
padding-bottom: 40px;
border: 2px solid #333;
background: #d0e8ff;
margin-bottom: 12px;
color: #111;
font-size: 14px;
}
.content-box { box-sizing: content-box; } /* total height = 80+40+4 = 124px */
.border-box { box-sizing: border-box; } /* total height stays 80px */
</style>
</head>
<body>
<div class="box content-box">content-box — total height: 124px</div>
<div class="box border-box">border-box — total height: 80px</div>
</body>
</html>Propriedades relacionadas
padding— abreviação que define os quatro lados de uma só vez.padding-top— espaço acima do conteúdo.padding-left— espaço à esquerda do conteúdo.padding-right— espaço à direita do conteúdo.margin-bottom— espaço externo abaixo da borda do elemento (fora, não dentro).box-sizing— controla se o padding está incluído nawidth/heightdeclarada.height— a altura da área de conteúdo, afetada porpadding-bottomno modocontent-box.