千锋前端浠浠呀老师HTML+CSS教程，零基础web前端开发入门必看视频

元素的垂直对齐方式 vertical-align

属性值

top 顶部对齐

使元素的上边框线与所在行框的上框线对齐

bottom 底部对齐

使元素的下边框线与所在行框的下框线对齐

middle 中心对齐

使当前元素的中线与当前行框的基线对齐

baseline 基线对齐（默认值）

字母 x 的下边线为基线

该属性只能给行内元素或者行内块元素设置

浏览器遇到行内和行内块元素当做文字处理，默认文字是按基线对齐，所以行内和行内块元素默认自带基线对齐属性

img属性的下边框线与当前行框的基线对齐

幽灵空白节点

解决目的：为了去除图片上下边框与父元素之间3-5px的空白区域

原因：img属性是与文字毫无关系的行内块元素，其本身基线位于下框线，但因行内块元素本身自带的基线对齐属性，使其下框线与当前行框的基线对齐，导致幽灵空白节点的产生（当前行框的基线位于小写字母“x”的下边）

思路

图片转为其他类型的元素

改变基线对齐的效果

去掉基线和底线之间的间距

解决方法

给图片转为块元素 display: block;

给图片设置 vertical-align: middle/top/bottom;

给元素设置 line-height: 0; / font-size: 0;

去掉图片左右3-5px的间距（代码换行会产生空格）

图片连着写

不影响布局的情况下，给图片加浮动