CSS margin: como definir as margens de um elemento!

O CSS margin é uma propriedade utilizada para adicionar um distanciamento na parte externa, ao redor do elemento. Ela pode ser definida com diferentes unidades de medidas e deve ser utilizada com atenção, pois como altera o posicionamento dos elementos, pode desestruturar o layout da página HTML.

A margin é uma área transparente, pois não recebe a propriedade background do elemento a que pertence. Trata-se de uma propriedade importante, pois ajuda a definir o layout e a centralizar os elementos em uma área sem a necessidade de realizar diversos cálculos. Para demonstrar como esse recurso funciona, preparamos esse conteúdo que contém os seguintes tópicos:

Continue conosco e boa leitura!

O que é a propriedade CSS margin?

Antes de falarmos sobre a propriedade margin, é preciso considerar que existem dois tipos de elementos HTML: os chamados bloco ou block e os em linha ou inline. A principal diferença entre eles é que, por padrão, o elemento block ocupa toda a linha, enquanto o inline ocupa apenas o espaço utilizado pelo conteúdo do elemento.

São exemplos de elementos block: <h1>, <h2>, <div>, <p>, entre outros. Fazem parte do conjunto de elementos inline: <a>, <img>, <span> etc. É importante entender a diferença entre eles, pois a propriedade margin não é aplicada na parte superior e inferior dos elementos inline.

Na prática, a propriedade margin é utilizada para inserir um espaçamento externo ao elemento, ao redor da borda. É importante não confundir essa propriedade com o padding, que define um espaço interno, entre o elemento HTML e a borda.

Qual a sintaxe dessa propriedade?

A propriedade margin pode ser definida com diferentes padrões de medidas. Confira a sintaxe desse recurso:

margin: lenght / auto / initial / inherit

No qual:

  • lenght: corresponde ao tamanho da margin e pode conter valores absolutos, que são fixos ou relativos, que variam conforme o ponto de referência;
  • auto: determina que o valor da margin é definido pelo navegador;
  • initial: assume o valor padrão para o elemento de acordo com o navegador;
  • inherit: recebe o valor da margin referente ao elemento pai.

Ao utilizar o valor lenght, também podemos determinar valores individuais para cada lado do elemento. Para isso, utilizamos as propriedades:

  • margin-top: para determinar a distância superior;
  • margin-right: para determinar a distância no lado direito;
  • margin-bottom: para indicar o espaçamento inferior;
  • margin-left: para informar o espaçamento esquerdo.

Entretanto, em vez de indicar cada propriedade de forma individual, também podemos utilizar as expressões simplificadas:

margin: valorUnico   

O mesmo valor será aplicado em todos os lados.

Exemplo: margin: 20px

margin: valorVertical valorHorizontal 

O valorVertical será atribuído às margens superior e inferior, enquanto o valorHorizontal será aplicado nas margens direita e esquerda.

Exemplo: margin: 0 auto

margin: valorTopo valorHorizontal valorInferior

O valorHorizontal será o mesmo para as margens esquerda e direita.

Exemplo: margin: 15px auto 10px

margin: margin-top margin-right margin-bottom margin-left

São atribuídos valores diferentes para cada lado.

Exemplo: margin: 30px 10px 30px 15px

Quais os valores da propriedade CSS margin?

Como mencionamos, os valores da propriedade margin podem ser definidos com diferentes unidades de medidas. Confira como funcionam cada uma delas.

Definindo o tamanho da margem com um valor fixo: length

O valor lenght atribui um valor fixo para a margin do elemento. Ele pode ser informado em diferentes unidades de medida, como pixels (px), pontos (pt), centímetros (cm) etc. Vale ressaltar que, ao utilizar a margin com um valor fixo, a mesma distância será aplicada sobre os diferentes tamanhos de tela.

Definindo o tamanho da margem relativo ao tamanho do bloco: percentage(%)

Outra forma de atribuir a distância da margem é por meio da definição de valores relativos, como a percentagem. Na prática, informamos o percentual desejado e o navegador realiza o cálculo de acordo com o tamanho da tela do dispositivo. Existem outras unidades de medidas que utilizam valores relativos, como o em, que equivale a duas vezes o tamanho da fonte corrente.

O navegador define a margem: auto

Quando definimos o valor da margem como auto, significa que o navegador tem duas opções: ou fará o cálculo para determinar o espaçamento horizontal de acordo com a área disponível, caso a largura do elemento seja definida; ou atribuirá o valor padrão para a margem, que é zero.

O valor auto também é utilizado para centralizar o elemento na tela ou dentro de outro elemento, como em uma <div>. Veja o código de exemplo abaixo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS - Margin</title>
</head>
<body>
    <div class="marginAuto">
        Margin auto aplicada em um elemento sem definição de largura.
    </div>
    <div class="container">
        Elemento com margin = auto e com largura de 800px.
    </div>
    <div class="container2">
        Segundo elemento com a margem automática e com largura de 400px.
    </div>
    <div class="box">
        <p>Parágrafo para testarmos como funciona a propriedade margin com a atribuição do valor
            "auto". Veja a centralização do conteúdo dentro do box que tem a largura de 400px. A margin "auto" foi aplicada apenas
            no parágrafo. 
        </p>
    </div>
    <style>
        .marginAuto{
            margin: 0 auto;
            border: 5px solid purple;
        }
        .container {
            width: 800px;
            margin: 0 auto;
            border: 5px solid red;
        }
        .container2 {
            width: 400px;
            margin: 0 auto;
            border: 5px solid blue;
        }
        .box{
            width: 400px;
            border: 5px solid green;
        }
        .box p {
            width: 250px;
            margin: 0 auto;
        }
     </style>
</body>
</html>

No primeiro elemento, o valor auto atribuiu zero para a margin. Portanto, o elemento ocupou todo o espaço da tela. Já nos outros exemplos apresentados, definimos a propriedade width para que os elementos ficassem centralizados na tela ou dentro de outro elemento. Por meio desse valor, o navegador faz os cálculos necessários para centralizar o conteúdo da maneira adequada.

Quando atribuímos à margin os valores “0 auto”, dizemos ao navegador que as margens superior e inferior são iguais a 0 e as da esquerda e direita são automáticas. É importante dizer que o valor auto não funciona para a centralização vertical.

Redefinindo a propriedade para o valor padrão: initial  

Podemos atribuir à margin o valor padrão definido pelo navegador. Para isso, basta declará-la como initial:

margin: initial

Herdando a propriedade de seu elemento pai: inherit

Outra possibilidade é herdar o valor da margem utilizada pelo elemento pai. Para isso, basta definirmos a propriedade como inherit:

margin: inherit

Colapsando margens: como utilizar o margin collapse?

O margin collapse é um comportamento do CSS para evitar grandes espaçamentos entre os elementos com valores definidos para as propriedades CSS margin-top e CSS margin-bottom. Para evitar a duplicação da margem, o navegador assume o valor da propriedade que tiver a margem maior. Veja o código fonte de exemplo abaixo.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS - Margin</title>
</head>
<body>
    <ul class="list">
        <li>Maça</li>
        <li>Laranja</li>
        <li>Pêssego</li>
        <li>Morango</li>
    </ul>
    <p class="margin20">Parágrafo com a propriedade margin igual a 20px.</p>
    <p class="margin15">Parágrafo com a propriedade margin igual a 15px.</p>
    <p class="margin20">Parágrafo com a propriedade margin igual a 20px.</p>
    <style>
        .list li{
            margin:10px;
        }
        .margin15{
            margin:15px;
        }
        .margin20{
            margin:20px;
        }
    </style>
</body>
</html>

Criamos uma lista de elementos e atribuímos uma margem de 10px para cada item. Na prática, todas as frutas da lista deveriam ter 10px em todos os lados do elemento. Portanto, entre um e outro item da lista, haveria a distância de 20px, pois deveria ser somado 10px da margem inferior do primeiro item com os 10px da margem superior do segundo item.

O margin collapse, portanto, evita esse grande distanciamento. No nosso exemplo todas as margens são de 10px. Por isso, essa foi a distância aplicada para todos os itens da lista. Já no exemplo seguinte, criamos três parágrafos com margens de 20px, 15px e 20px respectivamente. Perceba que a distância real entre eles é de 20px, que corresponde ao maior valor da margin.

Qual a compatibilidade com os navegadores?

Sempre que vamos desenvolver uma aplicação web precisamos considerar se os recursos utilizados na página funcionam de maneira adequada nos principais navegadores. Essa é uma boa prática para evitar que a pessoa usuária encontre falhas durante a navegação. Confira a partir de qual versão os navegadores oferecem suporte à propriedade margin:

  • Internet Explorer: 6;
  • Edge: 12;
  • Firefox: 2;
  • Chrome: 4;
  • Safari: 3.1;
  • Opera: 10;
  • iOS Safari: 3.2;
  • Android Browser: 2.1;
  • Opera Mobile: 12;
  • Chrome for Android: 88;
  • Firefox for Android: 83;
  • Samsung Internet: 4.

A propriedade CSS margin é utilizada para aplicar espaçamentos externos ao redor da borda do elemento HTML. Ela também contém algumas funcionalidades adicionais, como a facilidade para centralizar um elemento na página ou dentro de outros elementos e o comportamento collapse, que evita grandes espaços entre os itens da página. 

Gostou do nosso conteúdo sobre a propriedade CSS margin? Então, confira nosso post sobre o que é usabilidade e como aplicá-la em interfaces!

Deixe um comentário