Espaços no Site - Tutorial de CSS Sobre a Propriedade padding

Neste tutorial de nosso Curso de CSS, vamos aprender um importante elemento do Box Model (ou Modelo de Caixas), o padding.

Quer trabalhar criando sites? Invista em sua carreira e obtenha o Certificado do Curso de Webmaster!

A propriedade padding do CSS - Espaçamento ao redor do conteúdo

Como estudamos o Box Model, ou Modelo de Caixa, vimos que o primeiro bloco, ou caixa, ao redor de um conteúdo (que pode ser um texto, uma figura ou outro elemento qualquer) é o padding, que é uma espécie de espaçamento, enchimento ou acolchoamento.

Ou seja, ao definirmos os valores para a propriedade padding, estamos definindo o valor do espaçamento entre o conteúdo e a borda do elemento (da caixa em questão).

Lembrando que podemos formatar o espaçamento em quatro direções: top, bottom, left e right (acima, abaixo, na esquerda e na direita).

Assim como outros elementos que definem algum tamanho em CSS, vamos formatar essas distâncias da propriedade padding através do valor em pixels (px), pt ou em.

A propriedade padding tem cinco variações diferentes, de acordo com uma direção específica do espaçamento, ou para definir todas de uma vez.
Veremos agora como usar cada uma dessas variações.



padding-top : Espaçamento Acima do Conteúdo em CSS

A primeira variação da propriedade padding que vamos estudar é a padding-top, que vai definir o espaçamento acima do conteúdo.

A sintaxe é simples:

padding-top: n px;

Onde 'n' é um valor numérico, e px é apenas uma das maneiras de se definir a unidade (px é de pixel).

Para facilitar a visualização e teste do padding, vamos usar apenas um parágrafo (<p>) como sendo o conteúdo, e vamos pintar o fundo dele de cinza, para você visualizar bem esse padding.

Crime um documento .html e use o seguinte código em sua folha de estilos:
p{
	padding-top: 10px;
	background: grey;
	width: 400px;
}

Note que escolhemos 10px . Então, teremos um espaçamento de 10 pixels acima do texto presente em todos os parágrafos.
Vejamos como esse código se mostra quando abrirmos o site HTML:
Este parágrafo tem 10px de padding, acima

Agora 20 px, veja como aumenta o espaço:
Este parágrafo tem 20px de padding, acima

padding-bottom : Espaçamento Abaixo do Conteúdo em CSS

Agora, nesta variação da propriedade padding que vamos estudar a padding-bottom, que vai definir o espaçamento abaixo do conteúdo.

A sintaxe do padding-bottom é:

padding-bottom: n px;

Onde 'n' é um valor numérico, e px é apenas uma das maneiras de se definir a unidade (px é de pixel).
O seguinte código HTML & CSS mostra dois exemplos de uso do padding-bottom, um de 10 pixel e outro de 20 pixel:

<p style="padding-bottom: 10px; background: grey;">Este parágrafo tem 10px de padding, abaixo (bottom)</p>
<p style="padding-bottom: 10px; background: grey;">Este parágrafo tem 20px de padding, abaixo (bottom)</p>

Veja o efeito e como aumenta o espaçamento abaixo do conteúdo:
Este parágrafo tem 10px de padding, abaixo (bottom)

Este parágrafo tem 20px de padding, abaixo (bottom)

padding-left : Espaçamento na Esquerda do Conteúdo em CSS

Agora vamos aprender a usar a propriedade padding para criar um espaçamento lateral, vamos usar a padding-left, para definir um espaçamento na lateral do conteúdo, na esquerda (left).

Vamos usar o atributo width para definir uma região de 300 pixels de largura.
O seguinte código CSS & HTML vai criar dois parágrafos estilizados, com a propriedade padding-left valendo 10 pixels no primeiro parágrafo, e 20 px no segundo:

<p style="padding-left: 10px; background: grey; width= 300px;">Este parágrafo tem 10px de padding, na esquerda (left)</p>
<p style="padding-left: 20px; background: grey; width= 300px;">Este parágrafo tem 20px de padding, na esquerda (left)</p>

Veja o efeito e o espaçamento na lateral esquerda:
Este parágrafo tem 10px de padding, na esquerda (left)

Este parágrafo tem 20px de padding, na esquerda (left)

padding-right : Espaçamento na Direita do Conteúdo em CSS

Agora, analogamente ao que fizemos anteriormente, o padding-right serve para criar um espaçamento, mas agora na direita do conteúdo.

Veja o código HTML e de CSS, com 10px e 20px na lateral direita:

<p style="padding-right: 10px; background: grey; width= 200px;">Este parágrafo tem 10px de padding, na direita (right)</p>
<p style="padding-right: 20px; background: grey; width= 200px;">Este parágrafo tem 20px de padding, na direita (right)</p>

Rode o código dessa padding-right e veja o resultado no seu documento .html

padding : A propriedade de Espaçamento no CSS

Como dissemos anteriormente, é recomendável que você defina o espaçamento usando a propriedade padding para todas as direções: top, bottom, left e right.

Para evitar ter que repetir padding-top, padding-bottom, padding-right e padding-left, você pode definir todos esses valores em uma única propriedade, a padding.
A sintaxe é:

padding: tpx rpx bpx lpx;

Onde 't' é o valor para o top, 'r' de right, 'b' de bottom e 'l' de left.
Ou seja, você fornece 4 valores em sequência e sem vírgula, onde a ordem é sempre: top, right, bottom e left.

Por exemplo, se você deseja que seus parágrafos tenha 20 pixels de espaçamento acima, 10 pixels na direita, 25 pixels abaixo do conteúdo e 15px na esquerda, usando a propriedade padding, coloque em sua folha de estilos o seguinte código CSS:

p{
	padding: 20px 10px 25px 15px;
	width: 300px;
	background: gray;
}

Nenhum comentário: