html - スパン内の各改行に左右にパディングを追加する方法

Question

HTML

<h1><span>Lorem ipsum<br>dolor si amet<br>etc etc etc</span></h1>

CSS

h1{color:#fff;line-height:48px;}
h1 span{background:#000; color:#fff; padding:5px 10px;}

フィドル

各行の左右にパディングを追加したいと思います。この写真のように

しかし、私は解決策を見つけることができません。このテキストはクライアントが編集できるため、改行がどこにあるのかわかりません。

Answer 1

span要素はデフォルトでパディングをサポートしていません。

引用：「スパンはインライン要素です。デフォルトでは、左右のみのインライン要素に上下のパディングを追加することはできません。a）スパンをdisplay:blockにするか、b）スパンをフロートさせて固有の表示にする必要があります。 :この目的のためにブロックします。"