CSS – Fundamentos Básicos

CSS - Fundamentos Básicos
- Lecture 1
  CSS – Tutorial
- Lecture 2
  CSS – Introdução
- Lecture 3
  CSS – Sintaxe
- Lecture 4
  CSS – Unidades de medida
- Lecture 5
  CSS – Cores
- Lecture 6
  CSS – Backgrounds
- Lecture 7
  CSS – Fonts
  30 min
- Lecture 8
  CSS – Text
- Lecture 9
  CSS – Usando imagens
  30 min
- Lecture 10
  CSS – Links
- Lecture 11
  CSS – Tabelas
  30 min
- Lecture 12
  CSS – Bordas
- Lecture 13
  CSS – Listas
  30 min
- Lecture 14
  CSS – Margins
- Lecture 15
  CSS – Paddings
  30 min
- Lecture 16
  CSS – Cursores
  30 min
- Lecture 17
  CSS – barras de rolagem
- Lecture 18
  CSS – Dimensão
  30 min
- Lecture 19
  CSS – Outlines
  30 min

CSS – Fundamentos Básicos

CSS – Margins

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.

A margem especifica uma propriedade abreviada para definir as propriedades da margem em uma declaração.
A margem inferior especifica a margem inferior de um elemento.
A margem superior especifica a margem superior de um elemento.
A margem esquerda especifica a margem esquerda de um elemento.
A margem direita especifica a margem direita de um elemento.

A propriedade da margem

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>

A propriedade margin-bottom

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>

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>

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>

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>

Anterior CSS – Listas

Próximo CSS – Paddings

CSS - Fundamentos Básicos