Olá pessoal, nesse artigo vamos 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.
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:
#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.
#elemento { margin: 15px 10px 25px 35px; }
Utilizei os mesmo 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:
#elemento { margin: 25px 10px }
Ou seja, o margin top e bottom do elemento será de 25px e left e right de 10px.
Ex: #elemento { margin: topo/base esquerda/direita }
E se todos os valores forem iguais você pode declarar da seguinte maneira:
#elemento { margin: 10px; }
Quando dois elementos possuem margins que se tocam, automaticamente o maior margin prevalece e o menor é sobreposto.
<div> <h1></h1> <h2></h2> </div>
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:
Dei uma borda branca e uma cor laranja para o elemento e um background preto pro fundo para que de para 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. Vou usar uma imagem para ficar mais claro:
#elemento { background: #f90; width: 200px; height: 200px; margin: 25px; padding: 25px; border: 1px solid #fff; }
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 o conteúdo chegasse até a base dele, também teria uma padding de 25px.
Assim como o margin podemos escrever de diversas formas o padding:
#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.
