Почему разные элементы имеют разные размеры, даже с одинаковой шириной и высотой?

Question

Почему некоторые элементы немного больше и меньше, чем другие элементы? Например, div, установленный в ширину: 200 и height: 35, имеет ту же высоту, что и поле ввода с шириной: 196 и высота: 29.
Пример:

div { 
 
    width:200px; 
 
    height:35px; 
 
    border:1px solid red; 
 
} 
 

 
input { 
 
    width:200px; 
 
    height:35px; 
 
    border:1px solid blue; 
 
} 
 

 
#inp1 { 
 
    opacity:.5; 
 
}

<h3>Both set to width:200px and height:35px</h3> 
 
<div>DIV</div> 
 
<input placeholder='Input'> 
 
<br> 
 
<h3>Overlapping comparison</h3> 
 
<div> 
 
    <input id='inp1'> 
 
</div>

Answer 1

По умолчанию входной элемент имеет определенные CSS-свойства, такие как контур ширины, прокладки и т.д. Попробуйте установить их все 0px и попробовать еще раз :)

Answer 2

Входы по умолчанию имеют padding. Установите padding в 0, и вы увидите, что оба div и input будут отображаться с одинаковыми размерами!

div { 
 
    width:200px; 
 
    height:35px; 
 
    border:1px solid red; 
 
} 
 

 
input { 
 
    width:200px; 
 
    height:35px; 
 
    border:1px solid blue; 
 
    padding: 0; 
 
} 
 

 
#inp1 { 
 
    opacity:.5; 
 
}

<h3>Both set to width:200px and height:35px</h3> 
 
<div>DIV</div> 
 
<input placeholder='Input'> 
 
<br> 
 
<h3>Overlapping comparison</h3> 
 
<div> 
 
    <input id='inp1'> 
 
</div>