MARGENS CSS3
margin é a
propriedade usado para criar um espaço ao redor dos elementos.
Margem - Lados Individuais
Propriedades para
especificar a margem para cada lado de um elemento.
Ø margin-top
Ø margin-right
Ø margin-bottom
Ø margin-left
Propriedade tem
seguintes valores:
Auto - o navegador
calcula a margem.
Comprimento da margem
- px, pt, cm, etc.
% margem em largura %
do elemento recipiente.
herdar – margem herdada
do elemento pai.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border:3px solid black;
margin-top: 80px;
margin-bottom:70px;
margin-right: 120px;
margin-left: 80px;
background-color: yellow;
}
</style>
</head>
<body>
<h2>Usando propriedades de margem individuais</h2>
<div>Este elemento div tem uma margem superior de 80px, uma margem
direita de 120px, uma margem inferior de 70px e uma margem esquerda de
80px.</div>
</body>
</html>
Margem - Propriedade
abreviada
Propriedades para
especificar a margem para cada lado de um elemento.
Ø margin-top
Ø margin-right
Ø margin-bottom
Ø margin-left
MARGEM COM QUATRO VALORES
margem:
30px 60px 80px 90px;
margem
superior é 30px
margem
direita é 60px
margem
inferior é 80px
margem esquerda é 90px
NA PRÁTICA:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid black;
margin:30px 60px 80px 90px;
background-color: yellow;
}
</style>
</head>
<body>
<h2>A propriedade
abreviada de margem - 4 valores</h2>
<div>Este elemento div
tem uma margem superior de 30px, uma margem direita de 60px, uma margem
inferior de 80px e uma margem esquerda de 90px..</div>
<hr>
</body>
</html>
MARGEM COM TRÊS VALORES
margem:
30px 60px 80px
margem
superior é 30px
margem
direita é 60px
margem
inferior é 80px
NA PRÁTICA:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid black;
margin:30px 60px 80px;
background-color: yellow;
}
</style>
</head>
<body>
<h2>A propriedade
abreviada de margem - 3 valores</h2>
<div>Este elemento div
tem uma margem superior de 30px, uma margem direita de 60px, uma margem
inferior de 80px. </div>
<hr>
</body>
</html>
MARGEM COM DOIS VALORES
margem:
30px 60px;
margem
superior é 30px
margem
direita é 60px
NA PRÁTICA:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid black;
margin:30px 60px;
background-color: yellow;
}
</style>
</head>
<body>
<h2>A propriedade
abreviada de margem - 2 valores</h2>
<div>Este elemento div
tem uma margem superior de 30px, uma margem direita de 60px, </div>
<hr>
</body>
</html>
MARGEM COM UM VALORES
margem:
30px;
margem
superior é 30px
NA PRÁTICA:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid black;
margin:30px;
background-color: yellow;
}
</style>
</head>
<body>
<h2>A propriedade
abreviada de margem - 1 valores</h2>
<div>Este elemento div
tem uma margem superior de 30px. </div>
<hr>
</body>
</html>