elemento pai herdando margem
Olá pessoal,
Porque às vezes, quando colocamos margem em um elemento bloco, ele em vez de ficar com a margem, repassa ela para o elemento pai?
Para vocês entenderem melhor o que estou falando, criei aqui um exemplo onde ocorre isso:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<title>Teste com css</title>
<style type="text/css">
* {
margin: 0;
padding: 0
}
body {
margin: 5px;
font-family: sans-serif;
font-size: 12px
}
.coluna {
width: 200px;
background: #d00
}
.conteudo {
margin: 5px;
background: #900
}
.anuncio h1 {
text-align: center;
line-height: 30px;
font-size: 12px;
background: #700;
color: white;
}
</style>
</head>
<body>
<div class="coluna">
<div class="anuncio"><h1>Titulo</h1><div class="conteudo">Texto do anúncio</div></div>
<div class="anuncio"><h1>Titulo</h1><div class="conteudo">Texto do anúncio</div></div>
<div class="anuncio"><h1>Titulo</h1><div class="conteudo">Texto do anúncio</div></div>
</div>
<div class="coluna">
<div class="anuncio"><h1>Titulo</h1><div class="conteudo">Texto do anúncio</div></div>
<div class="anuncio"><h1>Titulo</h1><div class="conteudo">Texto do anúncio</div></div>
<div class="anuncio"><h1>Titulo</h1><div class="conteudo">Texto do anúncio</div></div>
</div>
</body>
</html>a div coluna não tem margem alguma, somente a div conteudo é que possui margem.
No entanto a ultima div conteudo de cada div coluna, está repassando a margem de baixo
para a div coluna, que é seu elemento pai. fazendo com que a ultima div conteudo fique sem margem de baixo
e com que a div coluna ganhe uma margem indesejada em baixo.
Testei esse codigo no firefox, safari e ie6. Somente no ie6 o problema não ocorreu, renderizando da forma aparentemente
correta.
Alguém sabe porque isso ocorre?
Discussão (22)
Carregando comentários...