Home/ Questions/Q 8412789
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T00:45:56+00:00

<!DOCTYPE html> <html> <head> <style type=text/css> #container { border: 1px solid red; } body

  • 0
<!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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    Diagram showing the above is accurate
    embiggen

    • 0