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?
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!
.jpg)
