将两个并列的元素的属性设为inline-block的影响

将两个并列的元素的属性设为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 属性设置元素的垂直对齐方式，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐