CODEWITHSUNDEEP
htmlcssmarginpadding
Pablo Gonzalez
Pablo Gonzalez

Reputation: 1810

How is percentage calculated when using it for margin and padding?

I need help understanding how the percentage is calculated when a div has no parent div, and we use percentage for its margin and padding. For example

<div id="q1" class="question"><p>Universal Containers was bought by a larger company   and needs to provide information on a
monthly basis to the new parent company to help predict sales.</p>
<p>Which data should the new parent company review?</p>
<ol>
<li>Dashboard of user login history</li>
<li>Count of new records created</li>
<li>Number of activities tied to opportunities</li>
<li>Opportunity pipeline report grouped by month</li>
</ol>
<p>The answer is 4</p>
</div>

That div sits directly into the body tag, there's no other div. Here's the CSS 

.question{background-color:#F5F5DC;
background-image: url(/pgonzalez/demo-project/html/Images/imageedit_6_5296743467.png);
background-repeat: no-repeat;
background-position:center;
border-width: 1px;
padding-top:0.1%;
padding-bottom:0.1%;
margin-bottom:1%;
padding-left:1%;
border-radius: 25px; /*makes the borders round*/
margin-right:40%; /*prevents the div from "touching" the right side of the browser   screen*/}

Although I'm getting the desired behavior, I don't understand why, for example the margin-right is 40%. 40% of what? I understand it's based on the parent element but because it sits directly into the body, I'm not sure I understand how it gets calculated. The same applies padding.

I know the question has been asked before and I did my homework before posting, I've also been trying to find a good article on the subject but haven't found any that would answer this specific question. If you could answer the question or point to a good resource that I can use to understand how % are always calculated, I'd appreciate it.

Upvotes: 0

Views: 74

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 105853

Margin and padding set with a % value will use width of parent's , that it is a vertical or horizontal rule :). This might confuse you.

http://www.w3.org/TR/CSS2/box.html#propdef-margin-top

http://www.w3.org/TR/CSS2/box.html#propdef-padding-top

Young browser can use vw and vh units to refer to window's width and height.

http://dev.w3.org/csswg/css-values/#viewport-relative-lengths

Upvotes: 1

Ashish Balchandani
Ashish Balchandani

Reputation: 1256

when you specify margin-right:40%; , it means 40% of parent element. In you case it is body element. By default, width of body is 100% of your screen size.

To understand more about margin, please refer http://www.w3.org/TR/CSS2/box.html#margin-properties

Upvotes: 1

MrRoss
MrRoss

Reputation: 35

It sounds like something within your whole code that is causing it? Should probably fiddle the page for a in-depth explanation.

Upvotes: 0

Related Questions