将其用于保证金和填充时,如何计算百分比?

时间:2014-08-02 12:11:15

标签: html css margin padding

我需要帮助了解当div没有父div时如何计算百分比,并且我们使用百分比作为其边距和填充。例如

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

div直接位于body标签中,没有其他div。这是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*/}

虽然我得到了理想的行为,但我不明白为什么,例如保证金权利是40%。 40%的是什么?我理解它基于父元素,但因为它直接位于体内,我不确定我是如何理解它的。这同样适用于填充。

我知道之前已经问过这个问题并且在发布之前我做了我的作业,我也一直试图找到一篇关于这个主题的好文章,但是没有找到可以回答这个具体问题的文章。如果你可以回答这个问题或指出一个好的资源,我可以用来了解%总是如何计算,我很感激。

3 个答案:

答案 0 :(得分:1)

指定margin-right:40%;时,它表示父元素的40%。在你的情况下,它是body元素。默认情况下,正文的width是屏幕尺寸的100%。

要了解有关保证金的更多信息,请参阅http://www.w3.org/TR/CSS2/box.html#margin-properties

答案 1 :(得分:1)

使用%值设置的边距和填充将使用父级的宽度,它是垂直或水平规则:)。这可能会让你感到困惑。

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

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

年轻的浏览器可以使用vw和vh单位来指代窗口的宽度和高度。

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

答案 2 :(得分:0)

这听起来像你整个代码中的某些东西导致它?应该对页面进行深入解释。