HTML - 无法定义正确的保证金

Question

我希望连续2个输入元素具有定义的宽度。我计算了边距和填充，但它不适合父元素。

js fiddle

HTML

<div class="wrap">
<input class="input-text left"type="text" name="name" placeholder="name" />
<input class="input-text" type="text" name="surname" placeholder="surname" />

 </div>

CSS

.wrap{
   width: 400px;
   background: lightgrey;
}

.input-text{
   width: 145px;
   padding: 0 20px;
   border: 0;
   background: grey;
 }

.left{
    margin-right: 30px;
}

Answer 1

你必须消除元素之间的空白区域，因为它也被计算在内。

<div class="wrap">
    <input class="input-text left" type="text" name="name" placeholder="name" /><!--
    --><input class="input-text" type="text" name="surname" placeholder="surname" />
</div>

小提琴：http://jsfiddle.net/bLz5s6kh/7/

参考：Fighting the Space Between Inline Block Elements

Answer 2

Demo

CSS

.input-text {
    width: 145px;
    padding: 0 20px;
    border: 0;
    background: grey;
    box-sizing:border-box; /* add this */
}