なぜ画像はテキストと同じ行にありませんか？

Question

http://xanlz.com/template 

イメージ（小さなロゴ）は、テキストよりもブラウザの上部の境界線ではかなり閉じています。テキストはなぜそうではありませんか？

Answer 1

あなたの画像は、テキストに垂直に配置する必要があります。ここでCSSです：

.f1 img { 
    vertical-align: text-bottom; 
} 

理由は、ブラウザの「行の高さ」をどのように解釈するか、それがインライン要素だけでなく、その垂直方向のスペース内のテキストを配置する方法です。

Answer 2

テキストには大文字が含まれていて、イメージには共有されないようにフォントに余白があります。あなたはそれが正確に座っている場所を細かく制御したい場合は

.f1 img { 
    position: relative; 
    top: 2px; 
} 

またはトップのための他の値：img要素の相対および2ピクセルのトップ値：あなたがポジションを追加することができます修正するには

Answer 3

。ここ

Answer 4

は、私は同じ行に複数の画像と単語を配置する方法である：

<div style="display:inline;float:left"> some word </div> 
<img style="display:inline;float:left".../> 
<div style="display:inline;float:left"> word 2></div> 
..... 

インラインスタイルは、それが必要なだけの幅を占めており、新しい行を取ることはありません。