Can anyone please explain me why the top and bottom margins of the inner box comes as zero in the output (
http://jsbin.com/ikate4) from the code listed bellow:
(If the commented CSS portion comes into effect, the output comes as expected)
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Why is this?</title>
<style type="text/css">
.outter-box {
width: 900px;
/* border: 1px solid gray;*/
margin: auto;
background-color: gray;
}
.inner-box {
height: 300px;
width: 500px;
margin: 10px;
background-color: yellow;
}
</style>
</head>
<body>
<div class='outter-box'>
<div class='inner-box'>
</div>
</div>
</body>
</html>
