html - 間の線の高さタグが違います

Question

簡単なホームページを作成しようとしていますが、行の高さがわずかに異なります。

タグ。これがHTML`です

ジャスティンはのリードエンジニアです

        <p>and also this &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp and Justin also  </p> 
            <a href="http://brabble.com"><img id="brabble" src="img/brabble.png"></a>

        <p>to make products work </p>`

そしてここに写真があります

Answer 1

画像はテキストと同じサイズではないため、テキストの書式設定の邪魔になります。いくつかのオプションがありますが、最も効果的なのは、画像を独自のスパンに配置し、そのスパンに明示的な高さ1emを指定し、overflow：visible：を使用することです。

<P>lalalala <span class='imagewrapper'><img ....></span> more text</p>

スタイル付き：

.imagewrapper {
  display: inline-block;
  height: 1em;
  overflow: visible;
}

http://jsfiddle.net/UG5us/を参照してください

Answer 2

この画像により、ラインボックスは、周囲の要素のラインの高さで指定された高さよりも高くなります。これを回避するには、画像を縮小するか、垂直位置を設定します。