Como usar as propriedades   Margin   e   Padding - CSS 
Autor: Edilene brandao da silva | Publicado: 2014-12-10T18:36:00-08:00




<!--
google_ad_client = "pub-3296052210640376";
google_ad_host = "pub-1556223355139109";
/* 200x200, criado 24/04/11 */
google_ad_slot = "9977440149";
google_ad_width = 200;
google_ad_height = 200;
//-->



.
<!--
google_ad_client = "pub-3296052210640376";
google_ad_host = "pub-1556223355139109";
/* 200x200, criado 24/04/11 */
google_ad_slot = "9977440149";
google_ad_width = 200;
google_ad_height = 200;
//-->



.
<!--
google_ad_client = "pub-3296052210640376";
google_ad_host = "pub-1556223355139109";
/* 200x200, criado 24/04/11 */
google_ad_slot = "9977440149";
google_ad_width = 200;
google_ad_height = 200;
//-->



.

<!--
google_ad_client = "pub-3296052210640376";
google_ad_host = "pub-1556223355139109";
/* 200x200, criado 24/04/11 */
google_ad_slot = "9977440149";
google_ad_width = 200;
google_ad_height = 200;
//-->












Como usar as propriedades &nbsp;

Margin &nbsp;

e &nbsp;

Padding - CSS

para saber mais clica aqui&nbsp;

&nbsp;

►" explorar a fundo as 
propriedades Margin e Padding do CSS.&nbsp;

Apesar de parecerem bem simples,&nbsp;

tem alguns segredos importantes

que precisam ser levados em conta."

















Margin
"A propriedade margin&nbsp;
simplesmente adiciona uma&nbsp;
margem ao seu 
elemento. "

Você pode utilizar qualquer medida Css (px, pt, em, %...)&nbsp;
como
 tamanho da propriedade margin,&nbsp;
além disso você pode&nbsp;
atribuir valores 
negativos,&nbsp;
mas tenha cuidado com eles.


Ela deve ser usada da seguinte maneira:



Listagem 1: Css


#elemento { 
    margin-top: 15px; 
    margin-right: 10px;
    margin-bottom: 25px;
    margin-left: 35px;
}&nbsp;
&nbsp;
&nbsp;


Essa é a declaração completa,&nbsp;
porém existe&nbsp;
uma forma mais prática&nbsp;
para declarar o margin&nbsp;
quando você deseja&nbsp;
adicionar margens&nbsp;
a todos os 
lados do elemento.


Listagem 2: Css

&nbsp;
#elemento { margin: 15px 10px 25px 35px; }



Foi utilizado...

..."os mesmos valores justamente&nbsp;
para fazer a relação,&nbsp;
na maneira
 curta (shorthand) ...

...o primeiro valor &nbsp;
é responsável pela&nbsp;
margem do topo,&nbsp;

a
 segunda pela direita,&nbsp;
a terceira pela da base&nbsp;
e a&nbsp;
quarta pela esquerda." 

&nbsp;Ex: #elemento { margin: top right bottom left };



"Caso ,
...o valor da&nbsp;
margem do topo&nbsp;
seja igual a da base&nbsp;
e a da direita&nbsp;
seja igual a da&nbsp;
esquerda&nbsp;
você pode declarar dessa forma:"

Listagem 3: Css

&nbsp;
#elemento { margin: 25px 10px }



Ou seja, o&nbsp;
margin top&nbsp;
e&nbsp;
bottom&nbsp;
do elemento&nbsp;
será de&nbsp;
25px e&nbsp;
left&nbsp;
e&nbsp;
right de 10px. 

Ex:
&nbsp;&nbsp;
#elemento { margin: topo/base esquerda/direita }






E,
se todos os valores,&nbsp;
forem iguais&nbsp;
...você pode declarar da seguinte maneira:


Listagem 4: Css





#elemento { margin: 10px; }
&nbsp;

"Quando dois elementos&nbsp;
possuem&nbsp;
margins que se tocam,&nbsp;
automaticamente ,
o maior margin prevalece &nbsp;
e o menor é sobreposto. "


Listagem 5: Html


&lt;div&gt;
    &lt;h1&gt;&lt;/h1&gt;
    &lt;h2&gt;&lt;/h2&gt;
&lt;/div&gt;
&nbsp;

Listagem 6: Css





h1 { margin-bottom: 20px; }
h2 { margin-top: 5px; }
&nbsp;


"Nesse caso a distância entre o&nbsp;
h1 e h2&nbsp;
não vai ser de&nbsp;
25px (20px + 
5px)&nbsp;
&nbsp;&nbsp;
como o esperado&nbsp;

e sim de 20px,&nbsp;

&nbsp;pois o margin de&nbsp;
5px do h2&nbsp;
vai ser 
sobreposto&nbsp;
pelo margin de&nbsp;
20px&nbsp;
do&nbsp;
h1."


A propriedade&nbsp;
margin &nbsp;
adiciona um espaço transparente&nbsp;
e ele não pode 
ser preenchido com nenhuma cor.&nbsp;

Além disso, ela não pode receber bordas.



Veja como fica um elemento de&nbsp;
200px por 200px&nbsp;
com uma&nbsp;
margem de&nbsp;
25px:

Figura 1. Elemento de Exemplo.

Foi dada
..."uma borda branca e uma cor laranja&nbsp;
para o elemento&nbsp;
e um&nbsp;
background preto&nbsp;
..."para o fundo"...
..." para se ...
... notar ...
as margens de 25px que
 ele recebeu.&nbsp;

Outra detalhe importante é que elementos do tipo inline não recebem 
aceitam a propriedade margin-top e margin-bottom, somente os de tipo 
block. Então caso queira usar o margin-top e bottom nele simplesmente 
altere seu display para block.




Padding

"O padding tem um funcionamento&nbsp;
muito similar ao do margin,&nbsp;
porém ,
ao 
invés de dar uma espaçamento externo,&nbsp;
ele da uma interno. "

..."usando uma uma 
imagem para ficar mais claro":


Listagem 7: Css&nbsp;


#elemento { background: #f90;&nbsp;
width: 200px;&nbsp;
height: 200px; 
margin: 25px;&nbsp;
padding: 25px;&nbsp;
border: 1px solid #fff; }&nbsp;
&nbsp;
&nbsp;


Figura 2. Elemento com Afastamento.



"Notem que,
&nbsp;o texto que estava dentro do nosso elemento,
&nbsp;agora está com 
um afastamento de &nbsp;
25px do topo,&nbsp;
da esquerda&nbsp;
e da&nbsp;
direita e,
caso,
o&nbsp;
conteúdo chegasse até a base dele,&nbsp;
também teria uma&nbsp;
padding de 25px."





"Assim como o&nbsp;
margin&nbsp;
podemos escrever&nbsp;
de diversas formas o&nbsp;
padding"


Listagem 8: Css:&nbsp;


#elemento { 
    padding-top: 25px;
    padding-right: 45px;
    padding-bottom: 35px;
    padding-left: 15px;
}
#elemento { padding: 25px 15px; } /* Top/bottom - right/left */
#elemento { padding: 25px; }/* top/right/bottom/left */






Tenha cuidado ao utilizar o padding pois ele aumenta a largura do 
elemento.&nbsp;

Caso seu elemento tenha um width de 200px e&nbsp;
você utilize um padding-left&nbsp;
de 50px&nbsp;
ele vai passar a ter uma largura de 250px.&nbsp;

Então, sempre que 
necessário, compense o padding do elemento reduzindo o width ou o 
height.


Espero que tenham gostado do artigo. Caso tenha passado alguma coisa importante em branco, basta comentar. 













     
    

&nbsp;

fonte e créditos:

devmedia













<!--
google_ad_client = "pub-3296052210640376";
google_ad_host = "pub-1556223355139109";
/* 200x200, criado 24/04/11 */
google_ad_slot = "9977440149";
google_ad_width = 200;
google_ad_height = 200;
//-->



.
<!--
google_ad_client = "pub-3296052210640376";
google_ad_host = "pub-1556223355139109";
/* 200x200, criado 24/04/11 */
google_ad_slot = "9977440149";
google_ad_width = 200;
google_ad_height = 200;
//-->



.
<!--
google_ad_client = "pub-3296052210640376";
google_ad_host = "pub-1556223355139109";
/* 200x200, criado 24/04/11 */
google_ad_slot = "9977440149";
google_ad_width = 200;
google_ad_height = 200;
//-->



.

<!--
google_ad_client = "pub-3296052210640376";
google_ad_host = "pub-1556223355139109";
/* 200x200, criado 24/04/11 */
google_ad_slot = "9977440149";
google_ad_width = 200;
google_ad_height = 200;
//-->