Margens e espaçamento interno

Nível: intermediário

Margens (margin) e espaçamento interno (padding) ajudam a manter seu blog bonito e fácil de ler. Em muitos casos é só isso que falta para que a página fique realmente agradável.

Não são raros os blogs todo “espremidinhos” que encontro todo dia, em que o título “disputa” espaço com o texto que “briga” com as imagens. Muito desagradável. Em qualquer design o espaço em branco é muito bem-vindo quando utilizado corretamente. Muitos dos casos de elementos espremidos em blogs e outros sites podem ser resolvidos com margin e padding.

Margin

A margem é o espaço externo. Se minha casa fosse um elemento HTML, a margem dela seria a calçada. Quando um elemento utiliza margens, ele está dizendo a cada um dos demais: Hei, mantenha-se a pelo menos X pixels de mim, ok?

Calçada surrupiada do Panóptico

Texto com margem

Código:

<div style='margin-top:4px; margin-bottom:5px; margin-left:100px; margin-right:7px;'>Neste exemplo de texto, as margens foram definidas na própria tag.<div>

Visualização:

Neste exemplo de texto, as margens foram definidas na própria tag.

Texto e imagem com margem

Código:

<img style='margin:5px; margin-right:100px;' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX6w0ELSvZnT9BqcFSIMx2w2-AxggVkIJvBBiB0RnrqhLC1hR8nbvODytOU73yxNFbLoH5TBicK9TTOSJhWMCDnaAb8tjcj9eVUSYYdcWiYMgdTZFWKGeh0DV_FzvMNUvDEbrDWw0pZTcd/s400/yahoo.jpg" align='right' />Observe que a imagem tem margem de 100px à direita e 5px nos outros três lados, de forma que não atrapalha a visibilidade do texto.

Visualização:

Observe que a imagem tem margem de 100px à direita e 5px nos outros três lados, de forma que não atrapalha a visibilidade do texto.

Padding

Se margin é a calçada, padding é o quintal, o espaço entre o muro (bordas) e o elemento (espaço construído da casa). Vejamos alguns exemplos:

Exemplo sem padding

<div style='border:1px solid black;'>Este é um texto sem padding, observe que as bordas estão encostando no texto e deixando a aparência um tanto quanto desagradável.</div>

Visualização:

Este é um texto sem padding, observe que as bordas estão encostando no texto e deixando a aparência um tanto quanto desagradável.

Exemplo com padding 1

<div style='border:1px solid black; padding:5px;'>Este é um texto com padding, observe que usei a mesma medida dos quatro lados.</div>

Visualização:

Este é um texto com padding, observe que usei a mesma medida dos quatro lados.

Exemplo com padding 2

<div style='border:1px solid black; padding:5px; padding-left:50px; padding-right:10px;'>Este é um texto com padding, observe que usei medidas diferentes dos quatro lados.</div>

Visualização:

Este é um texto com padding, observe que usei medidas diferentes dos quatro lados.

Margin e padding

Exemplo de código:

<div style='text-align:justify; border:1px solid salmon; height:228px; padding:5px;'><img style='margin:5px;' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX6w0ELSvZnT9BqcFSIMx2w2-AxggVkIJvBBiB0RnrqhLC1hR8nbvODytOU73yxNFbLoH5TBicK9TTOSJhWMCDnaAb8tjcj9eVUSYYdcWiYMgdTZFWKGeh0DV_FzvMNUvDEbrDWw0pZTcd/s400/yahoo.jpg" align='right' />Observe que o elemento div tem padding de 5px que é o espaço entre as bordas e o texto e entre as bordas e a imagem, enquanto a imagem tem margin de 5px que é a distância entre ela e o texto.</div>

Como fica:

Observe que o elemento div tem padding de 5px que é o espaço entre as bordas e o texto e entre as bordas e a imagem, enquanto a imagem tem margin de 5px que é a distância entre ela e o texto.

Na folha de estilos

Para mudar as margin e padding de qualquer elemento na folha de estilos é muito simples também. Veja o exemplo:

h2 {padding:5px; margin-top:10px; margin-bottom:5px;}
blockquote {padding:5px; padding-left:50px;}
body {border:0px; margin:0px; padding:5px;}
blockquote #cita {margin-top:5px; margin-bottom:10px; margin-left:25px; margin-right:50px;}
]]></b:skin>

Divirta-se!