内联元素从左往右

块级元素从上往下

block，inline，inline-block 元素的区别：

block 元素独占一行，宽度占满父元素宽度。可以设置 width, height, padding, margin 属性。如 div p ul 等。 block 元素可以包含其他 block 元素和 inline 元素，比较特别的是 <p> 只能包含 inline 元素。
inline 元素不换行，宽度由其内容决定。设置 width, height 无效。如 span em strong 等。 设置水平方向 padding(padding-left, padding-right) 和 margin(margin-left, margin-right) 有效， 垂直方向的 padding(padding-top, padding-bottom)，margin(margin-top, margin-bottom) 无效。
inline-block 元素不换行，设置 width, height, padding, margin 属性有效。 由于 inline-block 元素会产生新的 BFC，因此可以包含浮动。

块级元素与行内元素

div高度

div高度由其内部文档流的高度总和决定

<style>
     border:1px solid red;
     font-size:20px;
</style>
设置字体高度为20px，使用默认字体时，div高度为28.67

既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)

又呈现 block 特性 (可设置宽高，内外边距)

缝隙问题(inline-block 之间有空格、Tab、换行符等会产生缝隙)
<div class="box">
  <span class="inner">welcome,welcome,welcome</span>
  <span class="inner">welcome,welcome,welcome</span>
  <span class="inner">welcome,welcome,welcome</span>
<style>
  .box{
    border:1px solid green;
    text-align:center;
  .inner{
    display:inline-block;
    border:1px solid red;
    width:220px;
    padding:10px;
    margin-bottom:10px;
</style>
注：通过给span标签设置inline-block属性，发现既呈现 inline 特性、又呈现 block 特性

不占据整行又可设置width、height、padding、margin
两标签并排
<div class="box">
  <span class="inner">welcome,welcome,welcome</span><span class="inner">welcome,welcome,welcome</span>
  <span class="inner">welcome,welcome,welcome</span>