O HTML Progressivo agora faz parte do Programação Progressiva!
Este conteúdo foi atualizado e movido para o nosso novo endereço.
Redirecionando para: Clique aqui se não for redirecionado
Margem em CSS - A Propriedade margin
Se estiver acompanhando nosso curso de HTML e CSS desde o início, certamente sabe que esta não é a primeira vez que abordamos o tema margens, pois tratamos de margem em parágrafos, onde vimos como espaçar os parágrafos entre si, tanto acima como abaixo.Na verdade, as margens são muito usadas, principalmente por conta da propriedade margin, que é extremamente flexível, e nos permite definir as margens tanto em cima, abaixo e nas laterais, e de qualquer coisa.
O anúncio ao lado, por exemplo, tem um código CSS que define uma margem, um espaçamento do bloco de publicidade deste texto, para que não fiquem colados.
Em nosso Tutorial de Imagens em CSS, também iremos aprender a manipular imagens em um site, para definir seu local, margens, distâncias e espaçamentos, tudo através do nosso querido e todo poderoso CSS.
Se você já estudou a propriedade padding, vai entender logo o funcionamento da margin, pois podemos espaçar tanto acima (margin-top), abaixo (margin-bottom), na esquerda (margin-left) e pela direita (margin-right).
Embora essas propriedade do modelo de caixas (Box Model) do CSS se pareçam, elas são bem diferentes, com funções bem específicas.
A diferença de padding e margin
Após a explicação iremos mostrar na prática a diferença da margin e da padding.
O segredo é: a margem atua fora da borda.
É isso que diferencia da propriedade padding do CSS, que faz um espaçamento interno no elemento, entre a borda e o elemento, mas internamente.
Ou seja, ela é o espaçamento externo, do lado de fora das bordas, sendo muito usada para distanciar um elemento de outro, como uma figura de um texto, duas figuras entre si, um jogo em JavaScript do restante do conteúdo do site etc.
Assim, você tem um elemento, ou uma caixa (um bloco) em seu site.
Coloque outro bloco. Ok, agora para separar um elemento de outro, você usa as margens, vai distanciá-los, dar um espaçamento externo entre os blocos.
Exemplo de código CSS com padding e margin
Vamos criar um simples exemplo, passo a passo.Primeiramente crie seu documento HTML e sua folha de estilos.
Nosso site HTML ficou assim:
<!DOCTYPE html> <html> <head> <title>Tutorial de CSS - A Propriedade margin</title> <meta name="description" content="Como usar margens através da propriedade margin do CSS, em sites HTML."> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="estilo.css"/> </head> <body> </body> </html>
Note que o nome de nossa folha de estilos é estilo.css.
Agora vamos criar um simples parágrafo dentro da tag <body>:
<p>Curso de CSS Completo !</p>
Vamos aplicar uma borda nesse parágrafo, uma largura de 100px e colocar a cor branca nesse bloco.
O código para você aplicar na folha de estilos CSS é:
p{ border: solid; width: 100px; background: white; }
Veja o resultado.
Agora vamos adicionar um padding, de 10px em cada lado, apenas adicione o seguinte código CSS na sua folha, ao elemento p:
padding: 10px 10px 10px 10px;
Abra seu site e veja o resultado do padding, um espaçamento INTERNO, dentro da borda!
Vamos agora adicionar uma tag div, que vai englobar o parágrafo <p> da <body>, vamos nomear essa div com o atributo class e dar o nome de "bloco".
O código fica:
<div class="bloco"> <p>Curso de CSS Completo !</p> </div>
Volte na folha para estilizarmos essa div. que vai ter uma borda de cor azul, largura 125px e fundo amarelo. Ou seja, adicione o seguinte código em sua folha de estilos:
.bloco{ border: solid blue; width: 125px; background: yellow; }
margin-left, margin-right, margin-top, margin-bottom e margin
Agora vamos adicionar as margens!Adicione cada um dos seguintes códigos, um por você e você vai ver qual a utilidade da propriedade margin:
margin-left: 10px; margin-right: 10px; margin-top: 10px; margin-bottom: 10px;
Você pode substituir todas essas linhas por uma só, assim como fizemos com a padding:
margin: 10px 10px 10px 10px;
Maneiras de uso da propriedade margin
A propriedade de margem do CSS possui algumas funcionalidade bacanas, para adicionamos margem de várias maneiras simples, e uma delas nós mostramos no exemplo imediatamente acima, quando colocamos quatro valores de tamanho em sequência.Quando fazemos isso:
margin: Apx Bpx Cpx Dpx;
O valor A define a margem superior, o valor B define a margem direita, o valor C define a margem inferior e o valor D a margem da esquerda.
Já se você colocar somente um valor: margin: Apx ;
Esse valor A será as margens em todas direçõas (top, right, down e left)
Se colocar dois valores: margin: Apx Bpx ;
O primeiro valor, o "A" será a margem inferior e superior (bottom e left) e o segundo valor "B" será o valor das margens laterais (right e left)
E por fim, é possível colocar três valores: margin: Apx Bpx Cpx;
Onde o A é para margem superior, o B para as margens laterais e o valor C é a margem inferior.
Lembrando que pixel (px) é só uma das medidas, você pode usar porcentagem, pt, em etc.
Veremos melhor como usara a propriedade margin e suas propeidades específicas, margin-top, margin-right, margin-bottom e margin-left, quando aprendermos a colocar mais blocos em nossos sites, como imagens, vídeos etc.