将两个并列的元素的属性设为inline-block的影响
这是html代码：
<form class="login_form" id="login_form" action=""> <input id="userNumber" class="userNumber customInput" type="text" placeholder="用户名" autocomplete="off"> <p id="userNumber_error"><i>*</i>用户名错误</p> <input id="userPass" class="userPass customInput" type="text" placeholder="密码" autocomplete="off"> <p id="userPass_error"><i>*</i>密码错误</p> <img id="check_img" style="-webkit-user-select: none;display: inline;float:right;width:140px;height:47px;" /><input id="validateCode" class="validateCode customInput" placeholder="验证码"> <p id="validateCode_error"><i>*</i>验证码错误</p> <button id="login-button" type="button" class="customButton login-button" οnclick="myFun()">登陆</button><br/> <span class="registerHtml"><a href="register.html">注册</a></span><span class="forgetPass"><a href="update_password.html">忘记密码？</a></span> </form> <div id="login_container" style="width: 300px;height: 400px;display: inline-block;margin-left:20px;margin-top:30px;"></div> form的css如下：
.login_form{ border-right:2px solid #CCC; padding: 32px 30px; position: relative; /*top:-92px; */ min-height: 378px; left:0px; z-index: 2; display: inline-block; //vertical-align: middle; margin-top: 54px; }
在浏览器中打开，显示的效果如下：
按照道理，他们应该处于同一高度的，但事实上并非如此。
现在看看inline-block的属性：
inline-block元素可以将对象呈递为内联对象，但是对象的内容作为块对象呈递。
将对象用作内敛元素但又可以对它进行宽高设置。但有一点需要注意的是对象仍然呈递为内联元素，而同一行内的内联元素默认是基于 baseline 对齐的。
CSS渲染机制：对于一个inline-block元素，如果内部没有inline内联元素，或者overflow不是visible，则该元素的基线就是它margin的底边缘，否则就是元素内部最后一行内联元素的基线。
解决方法：
设置所有内联元素 vertical-align: top/middle/bottom;
因为vertical-align 属性设置元素的垂直对齐方式，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐
