Rogério Lino

Web development and tips

CSS Reference #2

Começando a segunda referência de CSS, vamos ver sobre: Margin & Padding.

Primeiramente uma breve descrição sobre cada. O margin como próprio nome já diz é o espaçamento da margem do elemento, da borda pra fora. Já o padding é o espaçamento da borda pra dentro do elemento. Ambas propriedades tem a sintaxe bem semelhante.

Margin

margin: seta o valor da margem para todos os lados. Podendo definir um a um, ou só um valor para todos, ou um valor para os lado e outro para cima e para baixo. Ficando a seqüência assim: top right left bottom. ex: margin: 15px 0px 20px 5px; (ficando: 15px (cima) 0px (direita) 20px (baixo) 5px (esquerda).

margin-top: define só a margem do topo. (ex: 15px;);

margin-right: define só a margem do topo. (ex: 0px;);

margin-bottom: define só a margem do topo. (ex: 20px;);

margin-left: define só a margem do topo. (ex: 5px;);

Padding

padding: seta o valor do espaçamento para todos os lados. Podendo definir um a um, ou só um valor para todos, ou um valor para os lado e outro para cima e para baixo. Ficando a seqüência assim: top right left bottom. ex: padding: 15px 0px 20px 5px; (ficando: 15px (cima) 0px (direita) 20px (baixo) 5px (esquerda).

padding-top: define só o espaçamento do topo. (ex: 15px;);

padding-right: define só o espaçamento do topo. (ex: 0px;);

padding-bottom: define só o espaçamento do topo. (ex: 20px;);

padding-left: define só o espaçamento do topo. (ex: 5px;);

mais sobre:

W3Schools - CSS Reference

Comments