inline-block中设置margin影响同行元素?

Question

<div class="left_top">
    <label>用户名：</label><input class="topinput" type="text" />
    <label>密码：</label><input class="topinput" type="text" />
    <input class="loginbtn" value="" type="button" />
    <a class="toplink" href="">5秒注册</a><span>|</span><a class="toplink" href="">忘记密码</a>
</div>


.left_top{float: left;color: #6C6B6B;line-height: 34px;height: 34px;}
.topinput{border: 1px solid #CFCFCF;width: 93px;clear: both;}
.loginbtn{background: url(../images/loginbtn.jpg) left center no-repeat;width: 52px;height: 29px;}

这里登陆btn是一个图片,因我设置了height和line-height后,元素都垂直剧中了,这很好,但我插入这张背景图片后是顶格的
,
我设置margin-top后却发现整行都下移了
,
请问这是为什么,遇到这种情况该如何处理呢?

Answer 1

由于.loginbtn是一个行内元素，而且它的高度（height: 29px;）比起另外几个行内元素要高。你又没有设置.loginbtn相对于其他行内元素的垂直对齐方式（默认是vertical-align: baseline;），所以导致没有像你想象的方式对齐。 加一个vertical-align: middle;可以达到你期望的效果：

.loginbtn {
  background: url(http://placehold.it/52x150) left center no-repeat;
  width: 52px;
  height: 29px;
  vertical-align: middle;
}

DEMO：http://jsbin.com/qekibeteni/edit?output

另外，例子中，在inline-block中设置margin肯定会影响同行元素，因为它们存在某种对齐方式。

附上：张鑫旭对css-vertical-align的一些理解与认识

Answer 2

首先，设置vertical-align: middle可以达到两个元素居中对齐，但是如果你不想居中对齐，给button设置margin-top，此时建议设置vertical-align: middle，可以达到理想目标。