Chrome의 CSS 픽셀 완전성

Question

픽셀 완성을 위해 브라우저가 다음 입력 요소의 위쪽과 아래쪽에 여분의 픽셀을 추가하는 것처럼 보입니다. 그러나 어디에서 왔는지 알 수 없습니다. 돋보기

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

의 Chromes (32)의 전체 높이를 가진 요소를 보여줍니다 그리고 그것은 HAML 코딩 전형적인 유증 양식의 30

을 얻으려고 :

.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" 

Answer 1

당신이해야 꺼내 패딩 :

input { padding: 0; } 

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

업데이트 :

Google 크롬에는 높이가 30px입니다.