空の要素の位置は、コンテンツの位置とは異なりますか？

Question

入力の隣に固定サイズの<button>を置こうとしています。私は次のことを試してみました：

<form> 
    <input type="text"> 
    <button type="submit">S</button> 
</form> 

CSS：

input { 
    height: 38px; 
    width: 50%; 
} 
button { 
    height: 38px; 
    width: 38px; 
} 

これは正常に動作しますが、私はボタンからインナーHTMLを取り外したときに、ボタンが13pxで自分自身を上に移動：

<form> 
    <input type="text"> 
    <button type="submit"></button> 
</form> 

Fiddle here

私はこの時点で何が起こっているのか、興味があります。私はこれを防ぐことができます。ボタンへの または:before）？

Answer 1

を変更する垂直整列性。最初の例ではテキストはないので、要素のベースラインは要素自体によってボックスとして決定されます。つまり、ブラウザは要素の下端としてベースラインを「見ます」。

vertical-align's possible valuesを見て、あなたのニーズに最も適したものを見てください。 middle,topおよびbottomはすべてあなたのボタンは入力と同じサイズですが、今後の計画に基づいて選択するため、ここですべて動作します。

Answer 2

使用要素は、デフォルトで、そのベースラインによって整列される整列

button { 
    height: 38px; 
    vertical-align:middle; 
    width: 38px; 
} 

DEMO