Default margin set on the <body> element
It seems my browsers has a default margin set on the <body> element and thus if some element E ( declared inside the body element ) has a margin of 10px, E will be removed from the edges of browser by distance = body_Margin + 10px.
a) Assuming we also have an element B, which is absolutely positioned:
#B
{
开发者_JAVA技巧 position:absolute;
width:150px;
top:128px;
right:0px;
margin:0px;
}
then I would expect that B would be removed from the right edge of a browser by a distance of 10px, but instead B ignores the default margin of a body element and thus its distance is 0px. Why is that?
b)
body
{
background-color: blue;
margin:70px;
}
Since body element has a margin of 70px, then due to margins being transparent ( and thus they don’t have the same background color as their element ), I would expect the edges of the browser window to have white color, but instead they have same color as the body element ( blue )?!
While I agree this is not a question, given the difference in browsers it is generally acceptable to have:
html, body {
margin: 0px;
padding: 0px;
}
...in your CSS to make sure you have full control. Why browsers do what they do ? I'll leave that to others to speculate.
The poster is asking why the element B is not effected by the margin of the body element.
Quoted from the question:
... I would expect that B would be removed from the right edge of a browser by a distance of 10px, but instead B ignores the default margin of a body element and thus its distance is 0px. Why is that?
The answer is this:
Read this page from w3schools on position. It says the following:
Absolute: Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static.
When you absolutely positioned your element (B), you removed it from the normal flow of the document. Because all of its parent elements (all the way up to the body of your document) are set to static (default), their margins are ignored.
You can either set the position of the body to relative (I would be careful with this - it could effect other elements as well), or you could change the right of B from:
right:0px;
to:
right:10px;
加载中,请稍侯......
精彩评论