边框制作按钮半按下输入

Question

http://jsfiddle.net/Xnbf4/

启用边框时，我的按钮被按下输入的一半。从输入中删除填充“修复”它但显然不是真正的修复...

按钮和输入应该是内联的（不是按钮上方的间隙）。

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

.input {
display: inline-block;
margin: 5px;
border: 2px solid $web-lines;
padding: 15px;
height: 18px;
}

.input-search {
padding: 15px 25px;
}

.button { /*Default button */
display: inline-block;
position: relative;
margin: 5px;
border: 0;
border-bottom: 3px solid $web-green-darker;
padding: 7px 15px 5px 15px;
color: #fff;
font-weight: 600;
background: #4d913e;
}

Answer 1

您只需添加vertical-align: middle：http://jsfiddle.net/Xnbf4/6/

.button, .input {
    vertical-align: middle;
}

垂直对齐适用于任何inline元素，包括inline-block。我不确定初始属性设置为什么（它似乎没有），但不设置它似乎导致问题。如果有人有更多的信息，希望他们会参与其中。