As propriedades margin e padding do CSS

As propriedades margin e padding do CSS

6 10 99
As propriedades margin e padding do CSS 10 6 99
CSSEditLogoDuas importantes propriedades do CSS, se chamam margin (margem) e padding (preenchimento). São elas que definem os espaçamentos entre os elementos do layout.
A margem é o que separa um elemento de outro e o preenchimento é o espaço entre o conteúdo e a borda desse conteúdo.
Para fazer o controle dos espaços, usamos um código com valores que podem ser em pixels (px), em porcentagem (%) ou em “em”. A palavra “em” vem da tipografia impressa e se refere ao tamanho da letra M maiúscula para uma determinada fonte.
Para este tutorial, vou usar as medidas em px (pixels).
Antes, é importante que vocês saibam o que quer dizer cada valor:
  • 0 – estamos dizendo ao navegador que é para usar um espaço padrão
  • 0px – estamos dizendo ao navegador para não colocar espaço
  • 5px – estamos dizendo ao navegador para colocar 5 pixels de espaço
Vamos ver um exemplo do código para configurar as margens:
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
ou, simplicando:
margin: 100px 40px 10px 70px;
O mesmo código se aplica ao preenchimento:
padding-top: 100px;
padding-right: 40px;
padding-bottom: 10px;
padding-left: 70px;
Os valores são apenas ilustrativos, onde:
  1. top: espaço entre o conteúdo e a parte superior
  2. right: espaço entre o conteúdo e a direita
  3. bottom: espaço entre o conteúdo e a parte inferior
  4. left: espaço entre o conteúdo e o lado esquerdo
A ordem deve sempre ser esta: top, right, bottom e left.
Também podemos usar um código ainda mais simples, quando os valores são iguais para todos os lados:
margin: 3px; ( equivale a 3 px em top, right, bottom e left)
padding: 4px; ( equivale a 5 px em top, right, bottom e left)
Se o valor for o mesmo para as partes superior e inferior e outro para direita e esquerda, usamos:
margin: 3px 5px ( superior e inferior=3px e direita e esquerda=5px)
Agora vou mostrar uma imagem, usado o template do Dicas de Informática
padding
Clique na imagem para ampliar. Veja que o CSS do header (cabeçalho) é:
/* HEADER
----------------------------------------------- */
#header-wrapper {
width:970px;
background:transparent;
border:1px solid transparent;
margin:0;
padding:4px;
}
A margem foi definida em zero e o preenchimento é de 4px em todos os lados.
Na imagem abaixo, vemos o conceito de box model do CSS
css-box-model
Fonte: W3.org
Pode parecer complicado ( e é), mas para modificar templates do Blogger, basta saber o código para controlar os espaços, ir testando valores e ir visualizando até encontrar o efeito desejado. Use um blog de testes e nao tenha medo de errar ;)
6 Comments
Comments
  1. Olá, Juliana!

    Que ótimo artigo! Uma verdadeira lição dos recursos básicos de HTML, essenciais para quem deseja customizar seus templates.

    Parabéns pela costumeira qualidade!

    Um abraço!

    Adelson Smania

    ResponderExcluir
  2. Juliana, gostei muito desse tutorial. Agora estou me dedicando a aprender HTML e esse tutorial está me ajudando bastante.

    ResponderExcluir
  3. Parabéns ju um ótimo tutorial mais uma vez você demonstra que css não é uma coisa de outro mundo.

    ResponderExcluir
 
Dicas Blogger© 2007-2015 | Todos os direitos reservados | Design By Duy Templates
Top