行内元素在竖直方向的margin，以及padding的使用问题

margin，和padding这两个属性是我们在进行页面的布局常用的俩个属性，也是盒模型计算的重要的参数。

那么这两个属性在行内元素上使用的时候实际上和块级元素以及行内块是有区别的，看一下下面的示例：

首先是代码：

<div>
	<span>这是一个行内元素</span>
	<p>这是一个块级元素</p>
</div>

上面的是html的代码，下面的是css的样式

div {
	width: 100px;
	height: 100px;
	background-color: orange;
}
span {
	background-color: blue;
	margin-bottom: 12px;
}
p {
	background-color: gold;
}

结构都很简单，那么在浏览器展示的是什么样的状态呢，以Chrome为例：

 

 

 

展示的效果就是这样，问题就不说明了，实际展示的很清晰，那么稍微修改下样式：

div {
	width: 100px;
	height: 100px;
	background-color: orange;
}
span {
	background-color: blue;
	margin-left: 10px;<!-- 添加了左边距 -->
	margin-bottom: 12px;
}
p {
	background-color: gold;
}

上面的展示的margin的属性的效果，那么下面展示的是padding的效果

div {
    width: 100px;
	height: 100px;
	background-color: orange;
}
span {
	background-color: blue;
	padding-left: 10px;
	padding-bottom: 12px;
}
p {
	background-color: gold;
}

上面的就是展示的效果

 

实际这些没什么值得说明就是我们使用的时候需要注意这些问题。