1 reply [Last post]
farahhaq
farahhaq's picture
Offline
newbie
Last seen: 7 years 40 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: 1 week 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

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.