图片下间隙问题&vertical-align 属性详解

图片下间隙问题

*图片下间隙出现的原因： 父元素没有设置高度，由图片撑开，就是有间隙*

​    *方法：*

​      *1、给img的父元素设置高度，高度和图片的高一致；*

​      *2、给img的父元素设置font-size：0；或者 line-height：0；*

​      *3、给img标签转换为块级标签  display：block;*

​      *4、为img标签设置垂直对齐方式  img{vertical-align：不为默认值 baseline}*

 

### vertical-align 属性详解

#### 1、作用

- 作用1：回顾表格处的应用

- 作用2：定义行内元素的基线相对于该元素所在行的基线的垂直对齐

#### 2、常用的值

- baseline  默认。标签放置在父标签的基线上

- top 把标签的顶端与行中最高标签的顶端对齐

- middle  把此标签放置在父标签的中部

- bottom  把标签的顶端与行中最低的标签的顶端对齐

#### 3、典型应用

- 图片与图片垂直方向的对齐（行内块与行内块）

- 图片与文字垂直方向的对齐