入力要素の高さが正しくない

Question

これらのコードを書いて、図のようにクロムコンソールでチェックします。 2つ余分に2つのピクセル。

<input type="text" id="keyWords" class="search-ipt" placeholder="请输入订单号/借款人姓名"> 

.search-ipt { 
    display: inline-block; 
    height: 28px; 
    width: 150px; 
    border: none; 
    outline: none; 
} 

input's attribute

Answer 1

input（要素を検査し、あなたは要素が継承するすべてのスタイルを見ることができます）のブラウザはpaddingをデフォルト値継承します。だから、あなたはブラウザを無効にするために、そのプロパティにいくつかの値を追加（または0に設定）する必要があります。

.search-input { 
    display: inline-block; 
    height: 28px; 
    width: 150px; 
    border: none; 
    outline: none; 
    padding: 0; /* or some other value */ 
} 

JSFiddle

は、Mayer'sのように、将来的には「リセットをいくつかのCSSのリセットを使用します"すべてのデフォルトのブラウザ値。私の側から

Answer 2

そのパーフェクトを

.search-ipt { 
 
    display: inline-block; 
 
    height: 28px; 
 
    width: 150px; 
 
    border:none ; 
 
    outline: none; 
 
    padding:0; 
 
    background:#ccc; 
 
}

<input type="text" id="keyWords" class="search-ipt" placeholder="请输入订单号/借款人姓名">

Answer 3

.search-iptpadding:0を設定し、あなたが150x28を取得します確認してください。

.search-ipt { 
    display: inline-block; 
    height: 28px; 
    width: 150px; 
    border: none; 
    outline: none; 
    padding:0;/*Add this*/ 
}