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

1、块级元素的盒子会扩展到与父元素同宽：这就是为什么块级元素独占一行的原因了。

2、行内元素的盒子会收缩到包紧其内容：这也是为什么几个连续的行内元素会并排一行的原因。

3、块级元素可以设置 width、height，而行内元素不行，行内元素的宽高是根据其内容定的。

4、块级元素的margin 和 padding 设置没有问题，但是行内元素无法设置上下的 margin 和 padding。

    注：这里要注意，虽然行内元素上下方向的边距对布局没有影响，但是如果设置了上下的 padding ，背景颜色会扩充到上下的内边距中。

5、对于 display: inline-block; 的元素，会像行内元素一样并排在一行，但是可以设置宽高和上下边距。