css块级元素与行内元素讲解

css块级元素与行内元素讲解
css的块级元素与行内元素是我们在布局中的基础，但是一般的不会去细究它们之间的区别今天就把自己的心得写出来。

常见块级元素：div p form ul ol li 等；
常见的行内元素：span stronh em；

区别主要有一下几点：
1. 块级元素会独自占一行，行内元素不会独自占一行且相邻的两个块级元素可以在同一行显示
如图：

2.行内元素设置height 与 weith 是无效的，块级元素可以设置height 与 weith，不管块级元素的宽度设置为多少都会占一行展示的
如图：

3. 行内元素水平方向的margin和padding如margin-right、padding-left可以产生边距效果，但是竖直方向的如padding-bottom和margin-top不会产生边距效果，块级元素可以设置margin和padding属性，
如图：

4. 块级元素与行内元素的相关属性 display
块级元素为 display: block 行内元素为：display: inline，可以通过切换属性值来实现块级元素与行内元素之间的转换
5. 还有一个属性可以使元素既具有行内元素的属性又可以有块级元素的属性，写法如下：
display: inline-block