解决文字、图片对齐空白缝隙之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;
}