rassul Posted March 5, 2014 Share Posted March 5, 2014 <html lang="en"> <head> <meta charset="utf-8"> <title> Title </title> <style> * { margin: 0; padding: 0; } #outerbox { background-color: gray; width: 300px; height: 300px; } #innerbox { width: 100px; height: 100px; background-color: green; border: 1px solid black; /*margin: 10px;*/ } </style> </head> <body> <div id="outerbox"> <div id="innerbox"></div> </div> </body></html> The above code's result is: but if I uncomment margin for innerbox the result is: Shouldn't the margin applied to innerbox and not the outerbox? Thanks in advance. Link to comment Share on other sites More sharing options...
dsonesuk Posted March 5, 2014 Share Posted March 5, 2014 Its called collapsing margins, the inner containers margin will seep beyond the edge of outer container, and if the outer container margin is less than inner, the inner container margin is used. FIX: apply overflow: hidden; to outer container, other options include adding 1px padding. Link to comment Share on other sites More sharing options...
rassul Posted March 5, 2014 Author Share Posted March 5, 2014 Its called collapsing margins, the inner containers margin will seep beyond the edge of outer container, and if the outer container margin is less than inner, the inner container margin is used. FIX: apply overflow: hidden; to outer container, other options include adding 1px padding. Thank you. Applied the overflow and it worked. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now