关于display:inline-block . 使用目标是图片和块的区别？

Question

1.关于display:inline-block . 使用目标是图片和块的区别？
今天遇到一个问题，在不使用浮动的情况下，让块和块里的图片都并列排序，
正常情况下使用float ：left；就可以使它们排序。inline-block也可以使用块正常排序。

问题是 当块里有img ，和div一起排列的时候为什么到顶点的高度就不相同？宽度有间隙我知道是父元素font-size：0

2.代码：`<div class="main">

    <p class="mainer">1</p>
    <p class="mainer">2</p>
    <img src="images/pic01.jpg" alt="图片1">
    <img src="images/pic01.jpg" alt="图片2">
    </div>`

        .mainer{
            width: 50px;
            height: 50px;
            background: #666;
            display: inline-block;
            
        }
        img{
            display: inline-block;
            width: 50px;
            height: 50px;
        }

效果图：

---

的确是 块中的文字造成的块不对齐，如果里面没有文字，它会和图片并列。

Answer 1

“html默认的情况是图片顶对齐而文字底对齐”，当文字和图片排列时会出现标准不统一的情况，所以你自己统一设置一种，比如“vertical-align：middle”就可以使文字和图片以垂直居中的方式对齐了。

你可以看下这个 http://www.jb51.net/css/77115.html

Answer 2

作用在图片和块元素 这里是没有区别的；之所以没顶到一起，是因为p标签是有文字，字体再垂直方向上是以基线 来对齐的。你没发现 图片的底部刚好是文字的底部；自己去百度下吧。
你这个问题只需要设置元素vertical-align：middle

Answer 3

在.mainer中添加vertical-align: top;和margin-top: 0px;就可以了，原因的话上完课告诉你。