解决文字、图片对齐空白缝隙

解决文字、图片对齐空白缝隙之vertical-align

vertical-align:top属性用于设置图片或者表单（行内块元素）和文字垂直对齐。
（只针对行内元素和行内块元素有效）：
给图片添加vertical-align :middle |top |bottom等 （提倡使用）

img {
            /* 默认基线对齐 */
            vertical-align: baseline;
            /* 底部对齐 */
            vertical-align: bottom;
            /* 中线对齐 */
            vertical-align: middle;
            /* 顶部对齐 */
            vertical-align: top;
    }
        
<img src="images/ys.jpg" alt="">我是耶稣

上面例子展示效果是顶部对齐（层叠性）
以下为展示效果图：

Tip：在之前做m.jd.com的时候发现一个小问题
没有理解这个图片的空隙是怎么回事，话不多说直接上图：

一开始怎么都没弄明白这个空隙是怎么一回事，后来才知道是图片的顶部没有对齐盒子顶部，需要给图片设置vertical-align: top

img {
    vertical-align: top;
}