Minicursos - CSS

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:

Margens CSS

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>

Margens CSS

Abaixo segue a mesma imagem ilustrando onde está atuando cada propriedade definida no código acima:

Margens CSS

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.



Algumas notícias

As memórias DDR5 estão chegando e trarão muitas melhorias

A próxima geração de memórias RAM já possui especificações definidas e promete grande melhoria em relação às atuais DDR4. E o mais importante: mesmo com desempenho bastante superior, elas consumirão menos energia. A tensão de trabalho das memórias DDR5 será de apenas 1.1V contra os 1.2V das atu...

Ler Notícia Completa

Google Chrome consumirá menos memória RAM em breve

O navegador da gigante de buscas da Internet é, sem dúvida, um dos melhores disponíveis, mas é inegável que o consumo de memória RAM por parte dele é exagerado. Este problema já se estende por anos, mas parece que em breve ele terá uma solução. Um novo recurso do Windows 10, chamado SegmentHeap...

Ler Notícia Completa

Sites e vídeos sem propagandas? Sim, é possível através da exploração de uma falha!

Seguramente você já se deparou com sites que bloqueiam o conteúdo da página e te obrigam a assinar determinado serviço para ler o conteúdo, certo? Ou foi tentar assistir aquele vídeo e as propagandas em tela cheia não pararam de surgir. Bem, todos já nos deparamos com isso, no entanto, um bug de...

Ler Notícia Completa

Inteligência Artificial cria antibiótico super potente

Pesquisadores do MIT (EUA) identificaram um novo e poderoso composto antibiótico usando um algoritmo de aprendizado de máquina, uma técnica de inteligência artificial. Em testes de laboratório, a droga matou algumas das bactérias causadoras de doenças mais problemáticas do mundo, incluindo algu...

Ler Notícia Completa
Você gostará destes vídeos!