关于li中加入img标签后将原有的input框和span标签撑到下面的解决方法

        遇到这个问题导致我找了一个多小时，在此记下以免来日再遇这种问题。

        观察问题：页面搭建时我使用ul-li来作为布局方式，一个前面两个都还正常，但是到最后一个li标签时，一图片放上去就会导致另外一个span标签和input框被撑到下面去。通过浏览器控制台我发现不管怎么调图片实际大小也没有占多余的高度。

         找问题：后来当我用鼠标选中放验证的img时，发现有一个不知名的下边距（并且没有存在于控制样式中），而这个边距正好就是导致整个li中内容不能对齐的最终原因。

         解决问题：于是我去面向了*度编程，最终在菜鸟上找到了问题所在，应是img在li中的vertical-align默认采用了baseline（默认，元素放在父元素的基线上），导致img在父容器li中的垂直对齐方式影响了li中的其他内容。于是乎通过设置vertical-align: middle;实现了li中内容对齐。

         扩展：解决问题后再来补充一下css样式的vertical-align这个属性的相关知识

       属性定义及使用说明

         vertical-align 属性设置一个元素的垂直对齐方式。

         该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

                                            **声明：作者主学java，对前端较为陌生，如有内容有误烦请批评指正。

                                            **本文：主要资料来源于：CSS vertical-align 属性 | 菜鸟教程 (runoob.com)