vertical-align 属性应用

使用场景，经常使用设置图片或者表单(行内块元素)和文字的垂直对齐
只针对行内元素和行内块元素有效，对块元素无效（但是要是把块元素转换成行内块元素，会不会生效呢？）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pa0p0VjC-1626714624881)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210719234614505.png)]

vertical-align:baseline(基线)|top(顶线)|middle(中线)|bottom(底线)

vertical-align是加在图片img中，这样这一行的文字就可以和图片有一个对齐效果

vertical-align：middle(图片和文字垂直居中)

**补充一个小知识是用来显示斜体的跟**类似

• em（被强调的文本）
• strong（重要的文本）
• mark （被标记的/高亮显示的文本）
• cite（作品的标题）
• dfn（一个定义项目）

vertical-align和行内块元素更搭配哦

如果是图片就不用了转换成行内块元素，如果是一个盒子，添加的背景图片，就需要转换成行内块元素。

textarea也是行内块元素。

表单和图片都是行内块元素

5.2、解决图片底部默认空白缝隙的问题

bug:图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐

解决方式：给图片添加vertical-align:middle|top|bottom就不会有空白信息

​ 可以把图片转化成块元素，就不会有空白孔隙了 display:block;