同じ幅と高さでも、異なる要素が異なるサイズになるのはなぜですか？

Question

なぜいくつかの要素は他の要素よりわずかに大きく、小さくなりますか？たとえば、width：200とheight：35に設定されたdivは、width：196とheight：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>