Propriedade padding §

---

A propriedade padding é utilizada para definir o espaçamento interno de um elemento, ou seja, controla o espaço entre o conteúdo do elemento e sua borda.

Nota

Assim como a Propriedade margin, a propriedade padding pode aceitar um, dois, três ou quatro valores, cada um representando uma direção diferente.

Sintaxe §

/* Definindo o mesmo valor de padding para todas as direções */
.elemento {
  padding: 10px;
}
 
/* Definindo valores diferentes para cada direção (top, right, bottom, left) */
.elemento {
  padding: 10px 20px 15px 5px;
}

Direções do padding §

• padding-top: Controla o espaçamento interno acima do conteúdo do elemento.
• padding-right: Controla o espaçamento interno à direita do conteúdo do elemento.
• padding-bottom: Controla o espaçamento interno abaixo do conteúdo do elemento.
• padding-left: Controla o espaçamento interno à esquerda do conteúdo do elemento.

.elemento {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 15px;
  padding-left: 5px;
}

Valores específicos §

Percentual §

Define o padding como uma porcentagem da largura do contêiner pai.

.elemento {
  padding: 5%;
}

Shorthand §

Assim como na propriedade margin, o formato shorthand para padding é útil para aplicar valores a todas as direções ou a pares opostos.

/* Shorthand para aplicar o mesmo valor a todas as direções */
.elemento {
  padding: 10px;
}
 
/* Shorthand para aplicar valores diferentes para top/bottom e left/right */
.elemento {
  padding: 10px 20px;
}

Referências §

---

• Curso de JavaScript e TypeScript do básico ao avançado