<input>には不思議なボトムパッドが付いています

Question

いくつかのフォーム要素でかなり正確なスタイリングをしようとしています。この問題は私に多くの悲しみを引き起こしています。

Iフィールドのサイズは、純粋にテキストによって決定されるように、入力フィールドは、任意のより数ピクセルパディングを有する終わる（display: blockで）<input>からpadding、margin、borderとoutlineを除去しようとします他のブロックレベルの要素はまったく同じ方法でスタイルされています。ここでは例です： http://jsfiddle.net/nottrobin/b9zfa/

<input class="normalised testSubject" value="hello" /> 
<div class="normalised testSubject">hello</div> 

はレンダリング：その例で

<input>が19pxの計算高さを取得しながら、<div>は16pxの計算高さを取得します。

Chrome 16、Firefox 9、およびOpera 11では同じ動作をするので、明らかにエンジンに依存しません。

手作業で高さを追加することで問題を解決できますが、設計をresponsiveのままにしておきたいので、これをしたくありません。

ここで何が起こっているのか理解できたら助けてくれるのですが、どのようにして<input>がそれに続くブロックレベルの要素と同じ高さになるかを確実に確認できますか？

Answer 1

<input>のフォントサイズは、最小でline-heightです。両方の要素をより大きな値に設定すると、line-heightも削除されます。しかし、それでもあなたは最小値よりも小さな高さを持つことができません。そのための修正点は、first-line疑似要素を使用し、display: inline-block;に設定しています。

デモ：http://jsfiddle.net/ThinkingStiff/B7cmQ/

CSS：

.normalised:first-line { 
    display: inline-block;  
} 

しかし<input>が異なっ<div>よりも機能している理由を説明しません。 -webkit-appearance: none;でもそれを修正しませんでした。その内容をinlineとして扱う入力には、いくつかの目に見えないブードーがあるようです。 inlineの要素はフォントサイズに基づいて最小値を持つline-heightです。これはここで見ている動作です。だから、first-lineがそれを修正したのです。それは<input>の "子"要素をスタイリングしているようです。

line-heightがinline個の要素に表示されているデモです。 <div>要素の称号はline-height: 7px;です。 <span>は、その計算値が7px;を示していても、視覚的にはそれを尊重していません。

デモ：http://jsfiddle.net/ThinkingStiff/zhReb/

出力：

HTML：

<div id="container"> 
    <div id="div-large">div <br />large</div> 
</div> 
<div id="container"> 
    <div id="div-medium">div <br />med</div> 
</div> 
<div id="container"> 
    <div id="div-small">div <br />small</div> 
</div> 
<div id="container"> 
    <span id="span-large">span <br />large</span> 
</div> 
<div id="container"> 
    <span id="span-medium">span <br />med</span> 
</div> 
<div id="container"> 
    <span id="span-small">span <br />small</span> 
</div> 

はCSS：

#container { 
    background-color: lightblue; 
    display: inline-block; 
    height: 200px; 
    vertical-align: top; 
} 

#div-large { 
    line-height: 50px; 
} 

#div-medium { 
    line-height: 20px; 
} 

#div-small { 
    line-height: 7px; 
} 

#span-large { 
    line-height: 50px; 
    vertical-align: top; 
} 

#span-medium { 
    line-height: 20px; 
    vertical-align: top; 
} 

#span-small { 
    line-height: 7px; 
    vertical-align: top; 
} 

Answer 2

あなたはまったく同じフォント（サイズを含む）を使用していますか？

inputにbox-sizing: border-boxを追加してみてください。

私はこの問題を自分で持っていたことがありませんが、私はどこかIE9でテストとしてそれをのみを使用しました...

Answer 3

line-heightを削除する問題を解決するようです。

See fiddle。 FF thoでのみテストされています。

Answer 4

私はKNこんにちは私はこの質問に数ヶ月遅れていますが、私はGoogle検索でそれを見つけ出し、Firefoxの<input>要素に関していくつかの他の答えを明確にするのに役立つものを追加したかったのです。

Firefoxのデフォルトのフォームのスタイリングは、いくつかの厄介なCSSが含まれています

input { 
    ... 
    line-height: normal !important; 
    ... 
} 

これはFirefoxで任意のフォーム入力のline-heightプロパティをオーバーライドすることが効果的にできなくなります。この問題は長年にわたり存在していましたが、FF devsが規則から!importantを削除するのは簡単ではないように思えますが、そうすることでいくつかのアンダーフード実装の問題があります。また、明らかに、このルールの振る舞いについてがに依存するいくつかのウェブサイト（YouTubeを含む）があります。

詳細については、Mozilla bug #349259を参照してください。また、456bereastreet.comには、良いブログ記事があり、もう1つ（古い）は、meyerweb.comのEric Meyerです。