内边距-padding
padding 属性定义元素边框与元素内容之间的空白区域。从方向上分为：上右下左。其对应的属性名称分别是：
padding-top; padding-right; padding-bottom;padding-left; 属性值可以是长度值或百分比值（默认值为0px，不可以是负值）。如：
div{padding-top: 10px; padding-right: 0.25em;padding-bottom: 20px; padding-left:20%;}
可将其写入到一个符合属性中。使用规律同border，不写明方向时，默认四个方向的样式相同，如上边所说的{padding：20px;}表示上下左右的内边距都是20px；写明方向时表示只设置该方向上的值，如{padding-bottom:20px}表示下边的内边距是20px。
同时也可将多个方向进行简写。
两个值表示：上下 左右。如padding:20px 10px;表示上下内边距是20px，左右内边距是10px。
三个值表示：上 左右 下.如padding:20px 30px 40px;表示上边的内边距是20px，左右的内边距是30px，下边的内边距是40px。
四个值表示：上 右 下 左（顺时针方向）。padding: 20px 30px 40px 50px;表示上、右、下、左的内边距分别是20px 30px 40px 50px。
http://blog.csdn.net/emily_lhj/article/details/52268801
值复制介绍：http://www.w3school.com.cn/css/css_margin.asp
注：
1、百分数值是相对于其父元素的 width计算的（上下边距也是根据父元素的width计算而不是height），所以，如果父元素的 width 改变，则改元素的padding值也会改变。
2、内边距是占据宽高的。比如定义一个div的样式为
{width:200px;height:200px;padding:10px;}，则这个div的实际宽是220px（200的width，左右各10px的padding）。这就像我们买电器，收到快递时的箱子，如果我们要计算箱子的大小，那么他的宽=电器的宽（元素内容的宽）+泡沫减震等填充物的宽（padding）+箱子本身的厚度（border）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 400px;
height: 150px;
background-color: pink;
padding:10px 20px 30px;
/*paading复合写法 : top right bottom left
只有一个属性值时: 4个方向都是同一个值
设置两个属性值时：
第一个属性值设置的是上下两个方向，
第二个属性值设置的是左右两个方向。
设置三个属性值时：
第一个属性值设置的是上边一个方向，
第二个属性值设置的是左右两个方向，
第三个属性值设置的是下边一个方向。
设置四个属性值时：
第一个属性值设置的是上边一个方向，
第二个属性值设置的是右一个方向，
第三个属性值设置的是下边一个方向，
第四个属性值设置的是左边一个方向。*/
}
p{
padding:10%;
background:#FFEB3B;
width: 300px;
height: 30px;
}
</style>
</head>
<body>
<div>
This is a test for padding.
<p>This is a test for percentages.</p>
</div>
</body>
</html>
外边距-margin
margin围绕在元素边框的空白区域，设置外边距会在元素外创建额外的“空白”。从方向上分为：上右下左。其对应的属性名称分别是：
padding-top; padding-right; padding-bottom;padding-left; 属性值可以是长度值或百分比值（默认值为0px，可以是负值；百分数是相对于父元素的width计算的）。可将其写入到一个符合属性中。使用规律同border、padding。
注：margin还有一个属性值，auto。当左右的margin均为auto时，元素相对于父元素居中。
虽然margin的默认值为0px，但是浏览器会为某些标签预定义一些样式，所以使用时，如果有需要，做好进行默认样式重置，以保证样式的准确性。
margin就像一个快递与另一个快递之间的距离，所以不算在元素宽高内。
注：margin本身存在的问题：margin合并。当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。主要分为以下几种情况。
1、邻居间的合并。
2、父子间的合并。
3、自己与自己合并
4、复杂情况
注释：
1.只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
2.以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。
3. margin上下合并问题的解决方法：一种是加border；一种是脱离文档流。
<html>
<head>
<style type="text/css">
* {
margin:0;
padding:0;
border:0;
}/* 先进行初始化，清除默认样式 */
.wrap div,.father div{
width:300px;
height:100px;
}
.wrap{
border:1px solid #000;
height:300px;
}
#d1 {
margin-top:20px;
margin-bottom:20px;
background-color:red;
}
#d2 {
margin-top:10px;
background-color:blue;
}
.father{
margin-top:20px;
}
.child{
margin-top:10px;
background-color:blue;
}
.self{
margin:10px;
}
</style>
</head>
<body>
<div class="wrap">
邻居间的合并：请注意，下面两个 div 之间的外边距是 20px，而不是 30px（20px + 10px）。
<div id="d1">
</div>
<div id="d2">
</div>
</div>
<div class="father">
<div class="child"></div>
</div>
<div class="self"></div>
<div>
复杂的情况。注意下面两个div要是换下位置就不会全部吞并了。也就是说，一定要空的div在上边
<div style="margin:10px"></div>
<div style="margin:10px">复杂情况-上边的div</div>
</div>
</body>
</html>
以上笔记来源于：
http://www.w3school.com.cn/css/css_margin_collapsing.asp
妙味课堂
盒模型
注：
1、背景应用于由内容和内边距、边框组成的区域。
2、在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
