Styling text input without horizontal padding

Styling text (ie password, email, etc) inputs with fixed width and horizontal padding is always pain as we need to take into consideration that the padding value adds to our final width (did this phrase even make any sense?!)

Anyway, we 'should' all know about box-sizing: border-box by now, but if for some reason you don't want to use that due to browser support or whatever, here's what I do sometimes:

CSS
input[type="text"] { width: 220px; font-size: 14px; line-height: 24px; text-indent: 12px; /* This is the magic */ } </pre></code>

Basically, by using text-indent we can push the text from the left edge of the input instead of doing so with padding-left

Stupid little trick.