CODEWITHSUNDEEP
htmlcss
mark
mark

Reputation: 62896

What does percentage mean in the following most trivial html?

<!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

Answers (1)

Quentin
Quentin

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

Diagram showing the above is accurate
embiggen

Upvotes: 5

Related Questions