너비와 높이가 같아도 다른 요소의 크기가 다른 이유는 무엇입니까?

Question

왜 일부 요소가 다른 요소보다 약간 더 크고 작습니까? 예를 들어 width : 200 및 height : 35로 설정된 div는 너비가 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

는 입력 요소는 0 픽셀 다시 시도 :

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>

기본적으로