兄弟元素之间产生位置偏移的原因

Question

正常情况下应该如左边所示
但是在我们设置好第一个 input 表单，让它实现了居中，之后再加上一个 input 按钮元素，我们会发现第一个 input 表单会发生 2px 的向下偏移，当我们完全设置好了第二个按钮表单的位置的时候，第一个 input 表单已经彻底发生了第二次的偏移，偏移的量就是button表单的margin-top;情况如图右边所示

html结构

            <div class="search_box">
                <input type="text" name="search" class="search">
                <input type="button" name="search_btn" class="search_btn">
            </div>

css样式

.search{
    height: 14px;
    width: 215px;
    font-size: 14px;
    padding:11px 6px;
    margin: 10px 0;
    border: 2px solid #9E9E9E;
    border-right: none;
    position: relative;
}
//添加了按钮样式之后产生偏移情况
.search_btn{
    margin: 10px 0;
    height: 41px;
    width: 92px;
    background: url(../images/head_btn.gif) left top no-repeat;
    border: none;
}

解决方法，对第一个表单元素，设置 float:left 浮动，使它脱离文档流

<input type="text" name="search" class="search" fl>

这个时候，我们会发现第二个表单元素完全向左靠近了第一个表单，而且位置也是如同预期，处于居中，如图左所示
但是为什么会出现这样的问题呢？为什么设置浮动就可以解决问题了？

Answer 1

首先行内元素默认的 vertical-align 是 baseline
因为你的 input 元素设了一个 font-size: 14px，而输入框默认里边是有文字的，所以这个元素是按文字的大小 14px 来计算 baseline
而 button 元素里没有文字，是以高度 41px 来计算
所以如果你在输入框中任意输出一些文字，会发现这些文字的下沿和按钮的下沿是平齐的

那么想要解决问题就很好办了，以下两种方法都可以：

1. 两个元素都加上 vertical-align:middle，可以保证以中线对齐；

2. button 元素里加上 value（不知道只填个空格能不能行……没试），可以使基线以文字的来算

Answer 2

这个问题我觉得跟 normal flow 的渲染机制有关，我也无法做更加深入的解释，你第一个 relative position 是无效的，因为并没有设置对原有 normal flow 的偏移，仍然是 static 的效果，你仔细观察下外层 div 的高度，三种情况下都是不同的，60px、73px、61px，另外你调整后看上去是对齐了，其实两者差了 1px 的高度，对于布局这一块，推荐你使用 flex 。
这有一篇布局教程可以供你参考 http://zh.learnlayout.com/

Answer 3

这是因为 inline-box 默认是 base-line 对齐的，text input 的 base-line 是以里面的文字为基准，而空 button 没有 base-line 所以用 bottom 来计算。

解决方法很简单，给 .search 加 vertical-align: bottom; 即可，或者给 .search_btn value 加文字。