CSS no Lanche

Nas especificações da CSS existem 2 propriedades que proporcionam aos desenvolvedores adicionar espaço em torno de elementos HTML. Essas propriedades são chamadas de “margin” e “padding”. Margin e Padding são responsávei por adicionar espaços em branco entre os elementos de uma página HTML, pois sem a utilização dos mesmos, todo o conteúdo ficaria “grudado”.

A primeira impressão você deve estar se perguntando o por que de existir 2 propriedades para adicionar espaço entre os elementos HTML, mas embora suas funções sejam semelhantes, cada uma possui sua particularidade.

Padding é responsável por definir o espaço entre o conteúdo do elemento HTML e sua borda, já Margin é responsável por definir o espaço entre os elementos HTML. Para que fique claro as diferenças, dê uma olhada na imagem abaixo, ela representa o Box Model:

Tudo localizado dentro do campo azul é o conteúdo. A zona cinza indica a borda e o que está em branco simboliza as margens do elemento. Eles possuem propriedades que podem afetar diretamente a quantidade de espaço em cada elemento HTML. É por isso que você vê alí: top, right, bottom e left. Para resumir as diferenças, caso você queira definir um espaço entre as bordas e o conteúdo você deve usar padding.

Utilizando Margin e Padding

Assim como você pode definir bordas para cada lado de seus elementos HTML, você pode fazer o mesmo com as propriedades margin e padding. Tudo o que você precisa fazer é alterar os valores top, right, bottom e left:

p (border: 1px solid; margin-left: 20px; padding-top: 30px;)

Esse parágrafo possui uma borda sólida de 1px, margem esquerda de 20px e padding top de 30px.

Observe que os 30px de padding “puxam” a borda para cima, enquanto os 20px de margem esquerda empurram o conteúdo HTML e também a borda.

Utilizando declarações curtas

Assim como a propriedade border do CSS, margin e padding nos proporcionam uma forma “curta” de declarar as propriedades. Por exemplo, observe a declaração abaixo:

p {margin:50px 10px 15px 25px}

A primeira impressão você pode ficar confuso, mas é muito simples de entender. Em primeiro lugar, cada valor declarado na sentença é para cada lado do elemento HTML. O primeiro valor é para o topo (margin-top:50px), e eles seguem o sentido horário, então, o próximo valor seria para a direita (margin-right:10px), depois para baixo (margin-bottom:15px) e por último a margem esquerda (margin-left:25px).

Você ainda pode declarar um único valor, que será utilizado para os 4 lados do elemento HTML:

p {margin:50px}

Uma margem de 50px seria aplicada aos 4 lados do elemento HTML.