CODEWITHSUNDEEP
cross-browserpixelcsspixel-perfect
Keith Johnson
Keith Johnson

Reputation: 730

CSS Pixel Perfection in Chrome

In pursuit of pixel perfection the browser seems to be adding an extra pixel to the top and bottom of the following input element but I can't figure out from where. 

  input {
    border-radius: 10px;
    height:30px;
    display: inline-block;
    float:left;
    border:none;
    }
  }

Chromes magnifying glass shows the element with a total height of 32 and I'm trying to get 30.

It's a typical devise form coded in HAML:

.registration{:style => 'display:none'}
  = form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f|
    %div
      = f.label :email do
        = f.email_field :email, :autofocus => false, :placeholder => "Email"
    %div
      = f.label :password do
        = f.password_field :password, :placeholder => 'Password'
    %div
      = f.label :password_confirmation do
        = f.password_field :password_confirmation, :placeholder =>'Confirm Password'
    %div= f.submit "Sign up"

Upvotes: 1

Views: 510

Answers (1)

Nikola R.
Nikola R.

Reputation: 1173

You should take out padding:

input { padding: 0; }

JSFiddle: http://jsfiddle.net/nSmU9/

Update:

In Google Chrome, I see the height is 30px. enter image description here

Upvotes: 2

Related Questions