-百分比设置margin和padding,line-height,height

---

用百分数设置margin和padding

用百分数设置margin和paddding的时候，其top right bottom left的值是参照父元素盒子的宽度进行计算,如

 .demo1{ width:980px;height:500px;  }
 .demo1 div{margin:10% 5%; } // 相当于margin:98 49;

为什么都是以宽度为标准

1、高度持续增加

第一种说法是，padding-top如果以容器高度为参照，那么子元素应用padding值将会继续加高容器的高度，容器高度的变化又会反过来继续影响子元素的padding-top，陷入一个无限循环。

对于不定高的容器来说情况确实如此，但对定高容器则并不成立，这点和height类似，这也是为什么height的容器也必须确定好高度。也就是说，如果padding-top要参照容器高度，就必须和height一样做两种处理。

2、保持padding(margin)四个值统一

第二种说法则更为可靠， 为了保持padding(margin)四个值的统一 。

padding(margin)的值无论引用何种计量，四个值都一直保持统一，难道单独给百分比开特例？结合第一条的多情况处理，如果标准定义padding-top参照容器高度的话，恐怕要列出至少4条以上的例外说明——而这对无论谁，都没有好处。

事实上，垂直padding参照体是宽度这点也非常有用。虽然早期固化像素的设计中百分比值几乎不应用在padding或者margin上，但随着移动自 适应的布局的需要，百分比也逐渐稀疏平常。

比如配合background-sizing保持背景的比例，配合media query调整对应的间距，不一而足。这些应用都基于一个事实： 无论垂直还是水平，百分比值始终参考宽度 。

---

百分比设置position的left right top bottom

即，绝对定位时，相对于包含块padding-box的宽度；正常文档流中和设置浮动的情况下，相对于父元素content-box的宽度；

(1)css设置绝对定位后 top,bottom,设置百分比定位是按父元素的高度来计算的，同样left,right,设置百分比定位是按父元素的宽度来计算的

(2)如果父元素设置有padding值 则子元素定位 top的’百分比’值是 其父元素的height加上padding-top和padding-bottom

(3)设置了定位position: absolute的盒子，将top设为0%，盒子顶部将会紧挨着父元素（已定位）的顶部，若设为100%，则盒子顶部将会紧挨着父元素底部。

计算公式为：top_percent = 子盒子顶部距父盒子顶部的距离 / 父盒子高度

---

百分比设置line-height

(1)line-height: line-height 属性可取值有 normal | number| length | % | inherit，行高就是两行文本的基线（字母x的下边缘）之间的距离

• length：可以直接设置成你想要的行高，比如32px，2em；

• number：表示用设置的数值乘以当前元素的font-size得出的line-height，例如：line-height设置为2，font-size为16px，那么line-height就是16*2=32px；

• 百分比（%）：其实和number计算方法一样，例如：line-height设置为200%，font-size为16px，那么line-height就是16*200%=32px；

height

height一般用固定值

---

什么时候用margin什么时候用padding

---

一、具体定义

(1)边界(margin)：元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南

(2)padding称呼为内边距，其判断的依据即边框离内容正文的距离，而我喜欢CSS权威指南解释的“补白”（或者叫“留白”），因为他很形象。补白(padding)：补白位于元素框的边界与内容区之间。很自然，用于影响这个区域的属性是padding。——CSS权威指南

二、用法

(1)何时应当使用margin：

• 需要在border外侧添加空白时。

• 空白处不需要背景（色）时。

• 上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。

(2)何时应当时用padding：

• 需要在border内测添加空白时。

• 空白处需要背景（色）时。

• 上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。

三、总结

个人认为：margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。