1 reply [Last post]
farahhaq
farahhaq's picture
Offline
newbie
Last seen: 8 years 2 weeks ago
Timezone: GMT-6
Joined: 2014-01-05
Posts: 1
Points: 2

<!DOCTYPE html>
<html>
<head>
    <title></title>
 </head>
 
<body style="background-color: blue;margin:0px">
    <div style="background-color: red; height: 100px">
        <div style="background-color: yellow; height: 50px;margin:10px">
        </div>
 
    </div>
</body>
</html>

The second DIV tag is inside the first DIV tag. I was expecting the margin of the second DIV tag will be completely inside the first DIV tag. Why I can see some top margin between the first DIV tag and the body? why top margin of the second DIV goes out of first DIV tag?

This is my first post. Please help me.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 12 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi farahhaq, It's to do with

Hi farahhaq,
It's to do with block formatting context.
If you add overflow:hidden or auto to the outer div it will have block formatting context and display as you expect.