关于margin和padding
- 取值
- 百分数是相对于父元素的 width 计算的
- 如果缺少左外边距的值，则使用右外边距的值; 如果缺少下外边距的值，则使用上外边距的值。如果缺少右外边距的值，则使用上外边距的值。
- margin垂直外边距合并
- 当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者
- 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并
- 假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并
- 一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠.(相当于子元素的上边距变为父元素的上边距,从而同垂直元素发生合并,或产生间距)
<div class="top"></div>
<div class="middle">
<div class="firstChild">
我其实只是想和我的父元素隔开点距离。
</div>
</div>
//css
.top {
width: 160px;
height: 50px;
background: #ccf;
margin-bottom:20px;
}
.middle {
width: 160px;
background: #cfc;
}
.middle .firstChild {
margin-top: 20px;
}
//最后top的div和firstChild的div之间距离为20px,而不是20+20px, firstChild的上边距作为父元素的上边距并和垂直边距合并
- 用Margin还是用Padding
何时应当使用margin：
需要在border外侧添加空白时。
空白处不需要背景（色）时。
上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。
何时应当时用padding：
需要在border内测添加空白时。
空白处需要背景（色）时。
上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。
margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔
- margin在块元素、内联元素中的区别
- margin-top/margin-bottom对内联元素没有多大实际效果,不改变元素的行高度;如果你要改变内联元素的行高即类似文本的行间距，那么你只能使用这三个属性：line- height，fong-size，vertical-align。请记住，这个影响内联元素高度的是line-height而不是height
- margin-left/margin-right还是能够对内联元素产生影响的; 应用margin:10px 20px 30px 40px;，左边这个css如果写在inline元素上，他的效果大致是，上下无效果，左边离他相邻元素或者文本距离为40px，右边离他相邻元素或者文本距离为20px
