Margens em CSS
Use a propriedade CSS margin para criar espaço à volta do conteúdo de um elemento HTML, fora das bordas. As propriedades para especificar a margem são top, bottom, left e right.
A propriedade CSS margin é utilizada para criar espaço à volta de um elemento. O CSS oferece propriedades individuais para definir a margem de cada lado de um elemento (superior, direito, inferior e esquerdo).
Os lados individuais
Com a ajuda das seguintes propriedades, pode definir a margem de cada lado de um elemento:
Já é evidente que para o lado superior utilizamos margin-top, para o inferior margin-bottom, para o lado esquerdo margin-left e para o direito margin-right.
Todas as propriedades de margem aceitam os seguintes valores:
auto- a margem é calculada pelo browser,length- especifica uma margem empx,pt,cm, etc.,%- especifica uma margem como percentagem da largura do elemento contentor,inherit- especifica que a margem deve ser herdada do seu elemento pai.
A propriedade margin aceita valores negativos.
A margem como propriedade abreviada
A propriedade CSS margin é uma propriedade abreviada (shorthand) para as seguintes propriedades de margem individuais:
Quando a propriedade margin tem quatro valores diferentes, no código fica assim:
Margens diferentes em CSS
p {
margin-top: 25px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;
}Se todos os lados tiverem os mesmos valores, por exemplo, todos os lados são de 50px, em CSS podemos escrevê-lo assim.
A mesma margem em CSS, código
p {
margin: 50px;
}Quando os lados superior e inferior têm o mesmo valor (por exemplo, 15px) e os lados esquerdo e direito têm o mesmo valor (por exemplo, 10px), pode utilizar o código seguinte.
Margem CSS com 2 números, código
p {
margin: 15px 10px;
}Isto equivale a:
Margem CSS com 2 números, forma extensa, código
p {
margin-top: 15px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 10px;
}Quando os lados esquerdo e direito são iguais (por exemplo, 15px), o lado superior é 5px e o inferior é 10px, pode escrever:
Margem CSS com 3 números, código
p {
margin: 5px 15px 10px;
}Isto equivale a:
Margem CSS com 3 números, forma extensa, código
p {
margin-top: 5px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;
}Exemplo da propriedade margin:
Código da propriedade CSS margin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: white;
margin: 25px 10px 15px 20px;
}
</style>
</head>
<body>
<p>Paragraph with background-color, color and margin properties.</p>
</body>
</html>Resultado
O valor auto da propriedade margin
Pode centrar horizontalmente um elemento dentro do seu contentor definindo a propriedade margin como auto. Como resultado, o elemento ocupará a largura definida e o espaço restante será dividido equitativamente entre as margens direita e esquerda.
Exemplo da propriedade margin com o valor "auto":
Exemplo de utilização do valor "auto" da propriedade margin:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 300px;
margin: auto;
background-color: red;
}
</style>
</head>
<body>
<h2>The auto value</h2>
<p>
Setting the “auto” value of the margin property you can horizontally center the element inside its container. As a result, the element will take up the defined width and the space that remains, will be divided between the right and left margins.
</p>
<div>
The auto value horizontally centered this div.
</div>
</body>
</html>O valor inherit da propriedade margin
No exemplo abaixo, a margem esquerda do elemento <p> é herdada do seu elemento pai (<div>):
Exemplo da propriedade margin com o valor "inherit":
Exemplo de utilização do valor "inherit" da propriedade margin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: lightblue;
margin-left: 100px;
}
p.inherit {
margin-left: inherit;
padding: 10px 0;
}
</style>
</head>
<body>
<h2>The inherit value</h2>
<p>
Here the left margin is inherited from its parent element:
</p>
<div>
<p class="inherit">
With the help of the "inherit" value, the left margin is inherited from the div element.
</p>
</div>
</body>
</html>