css中display：inline-block与display：inline的区别

1、为了便于观察两者的区别，先设置一个起始样式。

   <div class="wrap">
        <div  style="background-color: red;">1</div>
        <div  style="background-color: yellow;">2</div>
        <div  style="background-color: orange;">3</div>
        <div  style="background-color: blue;">4</div>
        <div  style="background-color: pink">5</div>
        <div  style="background-color: salmon;">6</div>
    </div>

 .wrap>div{
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }

起始页面显示如下：

2、添加display: inline之后

 .wrap>div{
            width: 100px;
            height: 100px;
            display: inline;
            line-height: 100px;
            text-align: center;
        }

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随 元素的内容 而变化。

可以看到 inline元素设置width, height属性 无效，没有产生效果，实际上使用此属性后，元素会被显示为内联元素，具有内联元素的属性。

inline元素的margin和padding属性：
水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；
竖直方向的padding-top, padding-bottom也可以产生效果，但是margin-top, margin-bottom不会产生边距效果。

附：
inline元素的上下间距是通过文字行高（line—height）设置的，实质上还是文字高度撑开元素容器产生的效果。

去掉line-height元素的效果如下：

3、添加display: inline-block之后

 .wrap>div{
            width: 100px;
            height: 100px;
            display: inline-block;
            line-height: 100px;
            text-align: center;
        }

简单来说就是将对象呈现为 inline 对象，但是对象的内容作为 block 对象呈现，使用此属性后，元素会被现实为块级元素， inline-block 元素设置 width, height 属性 生效。之后的内联对象会被排列在同一行内，既具有 block 的宽度高度特性又具有 inline 的同行特性。

小总结：不管是使用inline-block还是inline，左右都会产生一个小间距，可能这就是为什么margin-left, margin-right可以改变，而margin-top, margin-bottom只能是默认值且不能改变吧。