margin,padding之间的比较

1. margin

1.1. margin设置元素的外边距宽度，按上右下左的顺序

1.2. 块级元素的垂直相邻外边距会合并，外边距不同时，取最大值

.box1, .box2{
	width: 100px;
	height: 100px;
	background: red;
	margin: 10px 10px;
	}
.box2{
	margin: 20px 10px;
}
/*html代码*/
<div class="box1"></div>
<div class="box2"></div>

1.3. 行内元素不占上下外边距,行内元素的的左右外边距不会合并

1.4. 浮动元素不会合并外边距

代码同上，box1,box2增加浮动属性

1.5. 相对定位时，块级元素垂直外边距会合并

1.6. 绝对定位时，外边距是基于绝对定位的位置再计算

.box1, .box2{
	width: 100px;
	height: 100px;
	margin: 10px 10px;
	position: absolute;
}
.box1{
	background: red;
}
.box2{
	left: 100px;/*距离左边为100px*/
	background: black;
	/*左右外边距为零*/
	margin: 20px 0px;
}
/*html代码*/
<div class="box1"></div>
<div class="box2"></div>

box2的margin-left增加到100px

1.7. 行内元素

.box1{
	width: 100px;
	height: 100px;
	margin: 10px 10px;
	background: red;
}
.box2{
	width: 100px;
	height: 100px;
	background: black;		
	margin: 20px 20px;
	}
	/*html代码*/
	<div class="box1"></div>
	<span class="box1">tdtnzdbfthdt</span>
	<span class="box1">tdtnzdbfthdt</span>
	<div class="box2"></div>

可以看到，行内元素的上下外边距不起作用，但左右外边距起作用，且不会合并。

1.8. 百分比

margin宽度可以用百分比值，是基于父元素的宽度进行计算

1.9 父子元素之间的margin-top

#box1{
	width: 400px;
	height: 200px;
	background: red;
}
	#box2{
	width: 100px;
	height: 50px;
	background: gray;
	margin-top: 10px;
}
/*html代码*/
<div id="box1">
	<div id="box2"></div>
</div>

按道理，子元素应该距离父元素顶部10px的距离...

因为两个盒子的垂直外边距完全接触会触发外边距的合并，所以解决方法就是把两个外边距隔开

解决方法：

1.9.1. 给父元素添加border

1.9.2. 给父元素添加`overflow: hidden;`(推荐)

1.9.3. 给父元素添加内边距

2. padding

2.1. padding设置元素的内边距的宽度，不允许负值。当元素有背景和内边距时，背景会延伸至内边距

.box1,.box2{
	width: 100px;
	height: 100px;
	padding: 10px 10px;
}
.box1{
	background: red;
}
.box2{
	background: black;
}
/*html代码*/
<div class="box1"></div>
<div class="box2"></div>

红色背景会充满宽为10px的内边距，垂直相邻内边距不会合并

有背景图片的（html代码同上，仅增加背景图片）：

蓝色方框为设置的box1范围，但背景图片会延伸至内边距边界。

2.2 行内元素

2.2.1 对于行内元素，有一个很特别的地方

两个相邻的行内元素，按道理应该在一行紧紧相邻，但是...

产生的原因是两个span标签之间的换行符，解决办法在此不展开

2.2.2.

.box2{
	padding: 10px 10px;
	background: red;
	font-size: 20px;
}
.box1{
        width: 200px;
	height: 100px;
	padding: 20px 10px;
	background: black;
}
/*html代码*/
        <div class="box1"></div>
	<span class="box2">gnfjyfajgirnnicfxndj</span>
	<span class="box2">gnfjyfyskxndj</span>

可以看到行内元素的上下内边距时不占文档空间的，两个块级元素之间的距离是行高，但左右边距还是占文档空间的。

2.3. 绝对定位

.box1,.box2{
	width: 100px;
	height: 100px;
	position: absolute;
	background: black;
}
	.box2{
	padding: 0 100px;/*左右增加100px内边距*/
	top: 100px;
	left: 100px;
}
/*html代码*/
<div class="box1"></div>
<div class="box2"></div>

可以看到，是在绝对定位基础上，再增加内边距

2.4. 百分比

设置padding宽度用百分比时，是基于父元素的宽度进行计算，所以只有块级元素适用