CSS margin pushing the body element
Question
I'm setting a margin for a div element, however the body element also gets that margin.
Consider this code:
<!-- HTML -->
<body>
<div>
</div>
</body>
<!-- CSS -->
<style>
html,body {
height:100%;
margin:0;
padding:0;
outline:1px solid blue;
}
div {
margin:20px;
outline:1px solid red;
}
</style>
This is the result and the problem:
So far I've solved the problem by adding a border:1px solid transparent; property to the body element. This ruins the 100% height because scrollbars appear due to the 1px border. Why does this happen?
POSSIBLE SOLUTION (thanks for the help): Add a padding-top:1px and a margin-top:-1px , this way the 100% height doesn't gets ruined with the scrollbars and your are avoiding margin collapsing.
3 answers
solution1
3 ACCPTED 2011-10-12 15:43:56
This sounds similar to a problem I had: Margins and negative margins . I solved mine by putting a padding-top rather than a border, maybe this works with your design slightly better? Otherwise try this link: http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html
solution2
2 2011-10-12 15:45:29
This is caused by an effect known as collapsing margins.
Certain adjoining margins combine to form a single margin. Those margins are said to “collapse.” Margins are adjoining if there are no nonempty content, padding or border areas or clearance to separate them.
solution3
0 2019-06-12 15:08:55
I know this is an old question, but I just wanna point out that, in the example given in the question, one could use padding instead of margins:
<!-- HTML --> <body> <div> content </div> </body> <!-- CSS --> <style> html, body { box-sizing: border-box; /* padding makes part of the */ height: 100%; /* box whose height is 100% */ margin: 0; padding: 0; outline: 1px solid blue; } body { padding: 20px; } div { outline: 1px solid red; } </style>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.