html - 折り返し時にスパンを重ねて表示

Question

何が起こっているのか画像を見てください。明らかにパディングはラップ時にカウントされていません

この動作なしでラップするにはどうすればよいですか?

Answer 1

スパンはブロック要素ではなく、インライン要素です。定義上、これはテキストに沿ったままであることを意味します。上/下のパディング/マージンに基づいて垂直方向に移動または調整することはなく、他の要素の垂直方向の配置に影響を与えることもありません。行ごとにテキストのスペースを増やしたい場合は、テキストのline-heightプロパティを設定する必要があります。

ブロック要素とインライン要素の違いと、スパンの高さを調整する方法を示すデモを次に示します。

http://jsfiddle.net/35fgV/

スパンのパディングを調整すると、テキストの上/下にパディングが適用されますが、テキストの位置やその上または下は調整されません。パディングが上下の行に重ならないようにする場合はline-height、そのテキスト ブロックにプロパティを設定する必要があります (必ずしもスパンではなく、同じテキスト行、<br>たとえばタグ間のもの) にプロパティを設定する必要があります。 text はline-height、同じ行の要素の中で最大のものを継承します。