CSS - Margens

A propriedade margin define o espaço ao redor de um elemento HTML. É possível usar valores negativos para sobrepor o conteúdo.

Os valores da propriedade margin não são herdados pelos elementos filhos. Lembre-se de que as margens verticais adjacentes (margens superior e inferior) irão colapsar umas nas outras de modo que a distância entre os blocos não seja a soma das margens, mas apenas a maior das duas margens ou o mesmo tamanho de uma margem se ambas forem igual.

Temos as seguintes propriedades para definir uma margem de elemento.

  • o margin especifica uma propriedade abreviada para definir as propriedades da margem em uma declaração.

  • o margin-bottom especifica a margem inferior de um elemento.

  • o margin-top especifica a margem superior de um elemento.

  • o margin-left especifica a margem esquerda de um elemento.

  • o margin-right especifica a margem direita de um elemento.

Agora, veremos como usar essas propriedades com exemplos.

A Propriedade Margin

A propriedade margin permite que você defina todas as propriedades para as quatro margens em uma declaração. Aqui está a sintaxe para definir a margem em torno de um parágrafo -

Aqui está um exemplo -

<html>
   <head>
   </head>
   
   <body>
      <p style = "margin: 15px; border:1px solid black;">
         all four margins will be 15px
      </p>
      
      <p style = "margin:10px 2%; border:1px solid black;">
         top and bottom margin will be 10px, left and right margin will be 2% 
         of the total width of the document.
      </p>
      
      <p style = "margin: 10px 2% -10px; border:1px solid black;">
         top margin will be 10px, left and right margin will be 2% of the 
         total width of the document, bottom margin will be -10px
      </p>
      
      <p style = "margin: 10px 2% -10px auto; border:1px solid black;">
         top margin will be 10px, right margin will be 2% of the total 
         width of the document, bottom margin will be -10px, left margin 
         will be set by the browser
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

A propriedade de margem inferior

A propriedade margin-bottom permite definir a margem inferior de um elemento. Ele pode ter um valor em comprimento,% ou automático.

Aqui está um exemplo -

<html>
   <head>
   </head>

   <body>
      <p style = "margin-bottom: 15px; border:1px solid black;">
         This is a paragraph with a specified bottom margin
      </p>
      
      <p style = "margin-bottom: 5%; border:1px solid black;">
         This is another paragraph with a specified bottom margin in percent
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

A propriedade do topo da margem

A propriedade margin-top permite definir a margem superior de um elemento. Ele pode ter um valor em comprimento,% ou automático.

Aqui está um exemplo -

<html>
   <head>
   </head>

   <body>
      <p style = "margin-top: 15px; border:1px solid black;">
         This is a paragraph with a specified top margin
      </p>
      
      <p style = "margin-top: 5%; border:1px solid black;">
         This is another paragraph with a specified top margin in percent
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

A propriedade da margem esquerda

A propriedade margin-left permite definir a margem esquerda de um elemento. Ele pode ter um valor em comprimento,% ou automático.

Aqui está um exemplo -

<html>
   <head>
   </head>

   <body>
      <p style = "margin-left: 15px; border:1px solid black;">
         This is a paragraph with a specified left margin
      </p>
      
      <p style = "margin-left: 5%; border:1px solid black;">
         This is another paragraph with a specified top margin in percent
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

A propriedade margin-right

A propriedade margin-right permite definir a margem direita de um elemento. Ele pode ter um valor em comprimento,% ou automático.

Aqui está um exemplo -

<html>
   <head>
   </head>
   
   <body>
      <p style = "margin-right: 15px; border:1px solid black;">
         This is a paragraph with a specified right margin
      </p>
      <p style = "margin-right: 5%; border:1px solid black;">
         This is another paragraph with a specified right margin in percent
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -