Margem CSS

Índice

As margens são usadas para criar espaço ao redor dos elementos, fora de quaisquer bordas definidas.

This element has a margin of 70px.

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 70px;
  border: 1px solid #4CAF50;
}
</style>
</head>
<body>

<h2>CSS Margins</h2>

<div>This element has a margin of 70px.</div>

</body>
</html>

Margens CSS

As propriedades CSS margin são usadas para criar espaço ao redor dos elementos, fora de quaisquer fronteiras definidas.

Com CSS, você tem controle total sobre as margens. Existem propriedades para definir a margem para cada lado de um elemento (superior, direito, inferior e esquerdo).

Margem - Lados Individuais

CSS possui propriedades para especificar a margem para cada lado de um elemento:

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

Todas as propriedades de margem podem ter os seguintes valores:

auto - o navegador calcula a margem
comprimento - especifica uma margem em px, pt, cm, etc.
% - especifica uma margem em% da largura do elemento que contém
herdar - especifica que a margem deve ser herdada do elemento pai

Dica: Valores negativos são permitidos.

Exemplo

Defina margens diferentes para todos os quatro lados de um elemento <p>:

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Using individual margin properties</h2>

<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div>

</body>
</html>

Margem - Propriedade abreviada

Para encurtar o código, é possível especificar todas as propriedades da margem em uma propriedade.

A propriedade margin é uma propriedade abreviada para as seguintes propriedades de margem individuais:

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

Então, aqui está como funciona:

Se a propriedade margin tiver quatro valores:

margin: 25px 50px 75px 100px;

margem superior é 25px
margem direita é 50px
margem inferior é 75px
margem esquerda é 100px

Exemplo

Use a propriedade abreviada margin com quatro valores:

p {
  margin: 25px 50px 75px 100px;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px 75px 100px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 4 values</h2>

<div>This div element has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a left margin of 100px.</div>

<hr>

</body>
</html>

Se a propriedade margin tiver três valores:

margin: 25px 50px 75px;

margem superior é 25px
as margens direita e esquerda são 50px
margem inferior é 75px

Exemplo

Use a propriedade abreviada margin com três valores:

p {	margin: 25px 50px 75px;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px 75px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 3 values</h2>

<div>This div element has a top margin of 25px, a right and left margin of 50px, and a bottom margin of 75px.</div>

<hr>

</body>
</html>

Se a propriedade margin tiver dois valores:

margin: 25px 50px;

as margens superior e inferior são 25px
as margens direita e esquerda são 50px

Exemplo

Use a propriedade abreviada margin com dois valores:

p {	margin: 25px 50px;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 2 values</h2>

<div>This div element has a top and bottom margin of 25px, and a right and left margin of 50px.</div>

<hr>

</body>
</html>

Se a propriedade margin tiver um valor:

margin: 25px;

todas as quatro margens são 25px

Exemplo

Use a propriedade abreviada margin com um valor:

p {
  margin: 25px;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 1 value</h2>

<div>This div element has a top, bottom, left, and right margin of 25px.</div>

<hr>

</body>
</html>

O valor automático

Você pode definir a propriedade margin como auto para centralizar horizontalmente o elemento dentro de seu contêiner.

O elemento ocupará então a largura especificada e o espaço restante será dividido igualmente entre as margens esquerda e direita.

Exemplo

Usar margem: automático:

div {
  width: 300px;
  margin: 
auto;
  border: 1px solid red;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}
</style>
</head>
<body>

<h2>Use of margin: auto</h2>
<p>You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:</p>

<div>
This div will be horizontally centered because it has margin: auto;
</div>

</body>
</html>

O valor herdado

Este exemplo permite que a margem esquerda do elemento

seja herdada do elemento pai (<div>):

Exemplo

Uso do valor herdado:

div {
  border: 1px solid red;
  margin-left: 100px;
}
p.ex1 {
    margin-left: 
inherit;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}
</style>
</head>
<body>

<h2>Use of the inherit value</h2>
<p>Let the left margin be inherited from the parent element:</p>

<div>
<p class="ex1">This paragraph has an inherited left margin (from the div element).</p>
</div>

</body>
</html>

Todas as propriedades de margem CSS

margin: Uma propriedade abreviada para definir todas as propriedades de margem em uma declaração
margin-bottom: Define a margem inferior de um elemento
margin-left: Define a margem esquerda de um elemento
margin-right: Define a margem direita de um elemento
margin-top: Define a margem superior de um elemento