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 -