O Em Busca do Código é um site em formato de plataforma de ensino a distância (EAD), plataforma esta totalmente aberta e gratuita. Construido de maneira independente e individual, este layout é baseado neste curso.

Os vídeos deste curso de HTML5 & CSS3 podem contém erros, utilize-o como repositório de códigos fontes (os códigos fontes funcionam). Nosso curso de JavaScript não contém erros.

Publicado em 2015.

Aula 10, espaçamento (padding)

Nessa aula vemos como utilizar a propriedade padding.

Padding-top espaçamento acima.
A padding-right espaçamento à direita.
A padding-left à esquerda.
A padding-bottom abaixo.

Assista ao vídeo:

Se você inserir apenas um valor, ele será utilizado em todos os espaçamentos. Se passar dois valores, o primeiro é acima e abaixo e o segundo direita e esquerda. Se passarmos três valores, o primeiro é acima, o segundo é valido para esquerda e direita e o terceiro abaixo. Se passarmos quatro valores seguimos em sentido horário, o primeiro é acima, o segundo direita, o terceiro abaixo e o quarto a esquerda.

Código fonte HTML (completo)

<!DOCTYPE html>

<html>
<head>
<title>Espaçamento</title>
</head>
<body>
<p>O espaçamento em HTML é feito pela propriedade padding. padding-top "arruma" o espaçamento acima. A padding-right "edita" o espaçamento a direita. A padding-left edita o espaçamento a esquerda. A padding-bottom abaixo. Se você passar apenas um valor, valerá para os quatro lados, se passar dois valores, o primeiro é acima e abaixo, e o segundo, direita ou esqueda. Se passar três valores, o primeiro é acima, o segundo vale a direita e esquerda e o terceiro é abaixo. Se passarmos 4 valores, a gente segue sentido horário, primeiro acima, segundo direita, terceiro abaixo, quarto a esquerda.</p>
</body>
</html>

Código fonte CSS (completo)

p {
padding: 5px 5px 5px 5px;
}

Dica

Em seu CSS altere número por número um de cada vez para você mesmo ver alterando o preenchimento.

Espero que este código fonte tenha sido útil.

Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.