unexpected margin with very simple html
Posted
by Serhat Özgel
on Stack Overflow
See other posts from Stack Overflow
or by Serhat Özgel
Published on 2008-11-24T22:32:18Z
Indexed on
2010/05/31
2:42 UTC
Read the original article
Hit count: 339
I have a very simple html. The red div is inside the blue div and has a 10 px top margin. On non-ie browsers, the blue box is 10 px apart from the top of viewport and the red div is at the very top of the blue div. What I expect is the ie behavior: red div must be 10 px apart from the top of the blue div. Why does non-ie browsers render like this? (I suppose the wrong behavior is the IE's but why?)
And, what is the correct way to do this?
<html>
<head>
<style>
body { margin:0; padding:0; }
.outer
{
background-color: #00f;
height: 50px;
}
.inner
{
height: 20px;
width: 20px;
background-color: #f00;
margin: 10px 0 0 10px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
</html>
© Stack Overflow or respective owner
