块级元素和行内元素的区别

	块级元素	行内元素
常见元素	div、p、form、ul、ol、li	span、strong、em
特性	独占一行，默认情况下，其宽度自动填满其父元素宽度	不会独占一行，相邻行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化
width、height属性	可以设置，设置了宽度还是独占一行	无效
margin和padding属性	可以设置	水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果， 但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。
对应的相关display属性	block	inline
切换	display:inline变成行内元素	display:block变成块级元素

原始状态：

<style type="text/css">
    p{ background:red;}
    div{background:yellow;}
    span{ background:blue;color:white;}
    strong{background:green;color:white;}
</style>
<p>块级元素 p </p><div>块级元素 div </div><span>行内元素 span </span><strong>行内元素 strong </strong>

 

<style type="text/css">
    p{ background:red;display:inline;}
    div{background:yellow;display:inline;}
    span{ background:blue;display:block; color:white;}
    strong{background:green;display:block; color:white;}
</style>
<p>块级元素 p </p><div>块级元素 div </div><span>行内元素 span </span><strong>行内元素 strong </strong>