- Joined
- May 6, 2006
- Messages
- 7,148
So, I've been playing with some nested DIVs and noticed something strange.
Here is the HTML in question:
This produces a DIV that is 800px X 600px with a colored background. Inside that DIV, there is another DIV with the text "inner DIV" and a 1px border. Now, the inner DIV has a top margin of 10%.
What's strange is the parent DIV has this 10% margin applied to it!!! If I add a border to the outer DIV OR if I add some text to the outer DIV, the 10% margin of the inner DIV is applied to inner DIV and not the outer DIV.
Why is this?
Peace...
Here is the HTML in question:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>DIV top margin</title>
<style type="text/css">
.inner {
border: 1px solid black;
display: block;
margin-right: auto;
margin-left: auto;
width: 220px;
height: 280px;
margin-top: 10%;
}
.outer {
display: block;
width: 800px;
height: 600px;
margin-right: auto;
margin-left: auto;
background-color: #99ffff;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">inner DIV</div>
</div>
</body>
</html>What's strange is the parent DIV has this 10% margin applied to it!!! If I add a border to the outer DIV OR if I add some text to the outer DIV, the 10% margin of the inner DIV is applied to inner DIV and not the outer DIV.
Why is this?
Peace...
