linksuteis-siteprofissional-com.

►linksuteis: Marginlinksuteis-siteprofissional-com google-site-verification: googled5a38144460aaa94.html

Translate

Buscar

Mostrando postagens com marcador Margin. Mostrar todas as postagens
Mostrando postagens com marcador Margin. Mostrar todas as postagens

Como usar as propriedades Margin e Padding - CSS



. . .






Como usar as propriedades  

Margin  

e  

Padding - CSS

para saber mais clica aqui 

 

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

Apesar de parecerem bem simples, 

tem alguns segredos importantes

que precisam ser levados em conta."



http://www.devmedia.com.br/como-usar-as-propriedades-margin-e-padding-css/24409
http://www.devmedia.com.br/como-usar-as-propriedades-margin-e-padding-css/24409

Margin

"A propriedade margin 
simplesmente adiciona uma 
margem ao seu elemento. "

Você pode utilizar qualquer medida Css (px, pt, em, %...) 
como tamanho da propriedade margin, 
além disso você pode 
atribuir valores negativos, 
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;
} 
 
 
Essa é a declaração completa
porém existe 
uma forma mais prática 
para declarar o margin 
quando você deseja 
adicionar margens 
a todos os lados do elemento.

Listagem 2: Css
 
#elemento { margin: 15px 10px 25px 35px; }

Foi utilizado...

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

...o primeiro valor  
é responsável pela 
margem do topo

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

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

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

Listagem 3: Css
 
#elemento { margin: 25px 10px }

Ou seja, o 
margin top 

bottom 
do elemento 
será de 
25px e 
left 

right de 10px.

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



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

Listagem 4: Css


#elemento { margin: 10px; }
 
"Quando dois elementos 
possuem 
margins que se tocam, 
automaticamente ,
o maior margin prevalece  
e o menor é sobreposto. "


Listagem 5: Html

<div>
    <h1></h1>
    <h2></h2>
</div>
 
Listagem 6: Css


h1 { margin-bottom: 20px; }
h2 { margin-top: 5px; }
 
"Nesse caso a distância entre o 
h1 e h2 
não vai ser de 
25px (20px + 5px) 
  
como o esperado 

e sim de 20px, 

 pois o margin de 
5px do h2 
vai ser sobreposto 
pelo margin de 
20px 
do 
h1."
A propriedade 
margin  
adiciona um espaço transparente 
e ele não pode ser preenchido com nenhuma cor. 

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

Veja como fica um elemento de 
200px por 200px 
com uma 
margem de 
25px:
Elemento de Exemplo
Figura 1. Elemento de Exemplo.

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

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 
muito similar ao do margin
porém ,
ao invés de dar uma espaçamento externo, 
ele da uma interno. "

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


Listagem 7: Css 

#elemento { background: #f90; 
width: 200px; 
height: 200px; 
margin: 25px; 
padding: 25px; 
border: 1px solid #fff; } 
 
 
Elemento com Afastamento
Figura 2. Elemento com Afastamento.

"Notem que,
 o texto que estava dentro do nosso elemento,
 agora está com um afastamento de  
25px do topo, 
da esquerda 
e da 
direita e,
caso,

conteúdo chegasse até a base dele, 
também teria uma 
padding de 25px."


"Assim como
margin 
podemos escrever 
de diversas formas o 
padding"

Listagem 8: Css: 

#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. 

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

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.













 
fonte e créditos:












. . .


Leia Mais ►

google chrome e seus poderes

https://www.facebook.com/photo.php?fbid=10201882200616783&l=e8eb6bb24a

twitter / twittar!!!!

Formulário de contato

Nome

E-mail *

Mensagem *


Postagens populares