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

Answer 2

Demo

CSS

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