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>

fiddle :http://jsfiddle.net/bLz5s6kh/7/

引用:Fighting the Space Between Inline Block Elements