CODEWITHSUNDEEP
javascripthtmlcssinput
1''
1''

Reputation: 27125

Why do text inputs have extra padding?

I'm trying to overlay text on an <input type="text"> (for cross-browser placeholder support). I've found that my positioning is always off by a couple of pixels, because of some kind of padding which can't be removed by setting padding: 0;. The suggestions here and here do not solve the problem.

You can see this padding in the following screenshot from Chrome, as the white space between the blue highlight and the yellow border:

enter image description here

How can I a) remove this space; or b) measure it using Javascript?

Upvotes: 6

Views: 265

Answers (2)

bfavaretto
bfavaretto

Reputation: 71939

If you replace the default borders with your own, the padding goes away (at least for me, on Chrome/Mac):

enter image description here

This is the CSS I used:

input {
    padding: 0;
    outline: none;
    border: 1px solid red;
}

http://jsfiddle.net/NZZ5B/

Upvotes: 2

Elmer
Elmer

Reputation: 180

You need to reset everything. So it is best recommended to use:

<style>
html, body {

  margin: 0;
  padding: 0;

}
</style>

Hope this helped.

Upvotes: -1

Related Questions