왜 텍스트 상자와 surronding 범위 사이의 높이 차이가 있습니까?

다음 html로 주어진 요소 높이의 차이가보고되는 이유는 무엇입니까?왜 텍스트 상자와 surronding 범위 사이의 높이 차이가 있습니까?

<span id="spanner" style="margin:0;padding:0;border:0;outline:0;"><input type="text" /></span>

텍스트 상자의 높이를 묻는다면 16px가됩니다. 범위의 높이는 19px로보고됩니다 (일반적으로 IE는 22px라고 말함).

2009-10-30 Danno

부모 요소는 텍스트 상자의 테두리, 채우기 및 여백에 대한 픽셀 요소를 고려하기 때문입니다.

2009-10-30 14:53:20

정확히 그랬습니다. 안쪽 여백과 테두리를 0으로 재설정하면 둘 다 동일하게보고됩니다. 고맙습니다. – Danno

IE 상자 모델은 다른 모든 브라우저와 다릅니다. 너비는 여백과 여백을 포함하여 총 여백과 여백을 포함하여 전체 여야합니다. – tahdhaze09

입력 요소에는 기본 테두리와 패딩이 있으며 브라우저마다 다를 수 있습니다. 그 제거하십시오 :

<input type="text" style="padding: 0; border: 0" />

요소의 효과적인 패딩/마진/국경을 볼 수 Firefox에서 방화범이 끌려와 요소를 검사 해보십시오. 예를 들어, 텍스트 필드의 상단과 하단에 2px 테두리와 1px 패딩이 있음을 알 수 있습니다.

2009-10-30 14:53:19

... 그 이유는 * {margin : 0; 패딩 : 0;} 좋은 생각입니다 :) –

나는 또한 모든 요소를 돌봐 재설정 스타일 시트를 통합하려고합니다. – tahdhaze09

답변