前端基础：行内元素与块级元素的区别从是否换行、设置width和height是否生效以及在水平和垂直方向上元素间的距离来阐

是否换行

没啥可说的，就很直观：块级元素换行；行内块元素不换行。

从盒模型的角度来看，行内元素与块级元素都可看作页面上的“盒子”，由内到外都具有：content、padding、border、margin四个属性。

盒模型分为两种：标准盒模型和IE盒模型。二者唯一区别在于width和height的计算方式，标准盒模型中宽高为content的尺寸，IE盒模型中宽高为content、padding以及border的值。

以IE盒模型为例：行内元素和块级元素的宽高都由内容content、padding以及border的值确定，区别在于单独设置元素的width和height样式属性时，行内元素不生效。

元素	是否生效
块级元素	生效
行内元素	无效

由于相邻块级元素是换行的，其距离主要体现在垂直方向，垂直方向的间距由前一个盒子content、padding、border、margin共同决定，此处由于margin存在外边距重叠问题，margin取两个元素的较大值；

行内元素之间不换行，在水平方向上，两个行内元素的间距由content、padding、border、margin共同决定。在垂直方向上，两个行内元素的间距只由content决定。

最后，行内元素和块级元素可通过设置display:block或者display:inline来相互转换。