Propriedades de Margens
As propriedades de margens em CSS são de vital importância para a criação de qualquer página, já que elas são aplicadas a praticamente todos os tipos de elementos. Bem, mas vamos lá! Elas são somente duas, a margin e a padding, mas quando combinadas podem posicionar os elementos com precisão em qualquer ponto da página.
Basicamente a propriedade margin atua fora do elemento e a padding atua dentro, dessa forma:
A figura acima ilustra um objeto que contém uma imagem. Os limites desse objeto estão demarcados pela borda (border), na imagem. Como se pode perceber, a propriedade padding está agindo dentro do elemento, ou seja, posicionando a imagem com precisão dentro do objeto. Já a propriedade margin posiciona o objeto dentro de um objeto maior, ou seja, delimita as margens que ele terá em relação ao objeto que o contém. É como se pudéssemos dizer, de forma grosseria, que o padding é uma margem interna, um enchimento para o objeto.
Assim como a imagem também demonstra claramente, as propriedades de margens funcionam como as de bordas, podendo ser definidas para qualquer um dos quatro lados do objeto.
Vou criar um pequeno código e demonstrar no navegador, vejam:
#elementoPai
{
width:700px;
height:500px;
border:2px solid #000000;
}
#molduraFoto
{
border:2px solid red;
width:400px;
height:300px;
background-color:#3CF;
margin-left:30px;
margin-top:50px;
padding-top:70px;
padding-left:50px;
}
O código HTML ficou da seguinte forma:
<body>
<div id="elementoPai">
<div id="molduraFoto">
<img src="Paisagem.jpg" />
</div>
</div>
</body>
</html>
Abaixo segue a mesma imagem ilustrando onde está atuando cada propriedade definida no código acima:
Trabalhar com margens em CSS é muito simples e, como citei acima, elas podem ser utilizadas em praticamente todos os elementos, como imagens, parágrafos, células de tabelas, listas, enfim, é de fundamental importância que você entenda o que essas propriedades fazem para que consiga posicionar seus objetos corretamente na página.