HTML 입력 오버 플로우가 추가 패딩 (파이어 폭스)

Question

편집 : HTML 입력 요소와도 숫자 입력 요소를 사용하고 Added Picture showing the left "padding"

. 두 요소 모두.

문자의 수가 입력 요소 크기보다 길고 커서를 마지막으로 입력 한 문자로 이동하면 입력 요소의 시작 부분에 몇 가지 마술 "패딩"이 추가됩니다.

이 동작을 방지하는 방법이 있습니까?

예 :

input{ 
 
    width:5em; 
 
} 
 
input[type="number"]::-webkit-outer-spin-button, 
 
input[type="number"]::-webkit-inner-spin-button { 
 
    -webkit-appearance: none; 
 
    margin: 0; 
 
}

<input type="text" value="000"><br> 
 
<input type="text" value="000000000"><br> 
 
<input type="number" value="000"><br> 
 
<input type="number" value="000000000"><br>

주

나는 또한 배경으로 격자를 사용하고 있습니다 만, 요소의 패딩이 변경되는 경우 그리드가 맞지 않는 . 난 당신이 바로 이해하고 당신이 당신의 HTML 블록에 패딩 영향을 제거해야하는 경우

Answer 1

, 당신은

*{ 
    box-sizing: border-box; 
} 

를 사용하거나 필요한 블록에이 규칙을 적용해야합니다.