inline

            对于行内元素span来说
            高度无用,宽度无用，
            padding的左右方向有用，上下放下对文档的排版无影响，但也可以看到背景颜色还是着上的
            margin上下方向无用，左右有用
            line-height 可撑开高度，但是并不计算在span的高度内，可以通过背景颜色看出
        

---

inline-block

            对于inline-block行内块级元素span来说
            高度有用,宽度有用，
            padding的左右方向有用，上下放下对文档的排版有影响
            margin上下方向有用，左右有用
            line-height 可撑开高度，但如果高度一已定义，有可能会发生溢出现象
            也就是说，行内块级元素除了不换行以外，其他属性与块级元素一致
        

---

结论

            1.块级元素会独占一行，其宽度自动填满其父元素宽度行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容         而变化

            2. 块级元素可以设置 width, height属性，行内元素设置width,  height无效【注意：块级元素即使设置了宽度，仍然是独占一行的】

            3. 块级元素可以设置margin 和 padding.  行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果
            但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）
        

---

附录行内元素&块级元素

---

行内元素[内联元素]inline

            a           锚点
            img         图片
            u           下划线
            strike      中划线
            i           斜体
    b/bold/strong       加粗
            span        常用内联容器，定义文本内区块
            big         大字体
            small       小字体
            br          换行
            sub         上标
            sup         下标
            em          强调
            textarea/input/select/label
        

---

块级元素block

            h1,h2,h3,h4,h5,h6
            p,div,form,table,pre
            ul,ol,li
            hr,address,blockquote
        

---

可变元素

            可变元素为根据上下文语境决定该元素为块元素或者内联元素。这是什么鬼
            iframe,object,button