Reputation: 62896
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container
{
border: 1px solid red;
}
body
{
outline: green solid 1px;
}
p.bottommargin
{
outline: green solid 1px;
margin-bottom:1%;
}
</style>
</head>
<body>
<p>This is a paragraph with no margin specified.</p>
<div id="container">
<p class="bottommargin">This is a paragraph with a specified bottom margin.</p>
</div>
<p>This is a paragraph with no margin specified.</p>
</body>
</html>
It is clearly 1% of neither the <p>
nor the <div>
nor the <body>
elements. So, what is it?
The sample is available here - http://jsfiddle.net/mark69_fnd/SJjaV/
Thanks.
P.S.
I am very new to the web programming, so I beg your pardon if my question is really stupid.
Upvotes: 1
Views: 228
Reputation: 944559
From the CSS 2 specification:
The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.
Thus it is 1% of the width of #container
Upvotes: 5