css - を使用して余白のあるテキストに背景を作成するには

Question

私は現在、これ<span>をスタイルテキストとして使用しています。

.tag {
    background-color:rgba(0,0,0,0.6);
    font-weight: bold;
    padding: 5px;
}

ただし、その下にいくつか追加すると、すべての境界線が互いに接触します。なので<span>、動かせるとは思えませんが、テキストが入って<div>いる元の や スタイルを使用する<p>と、背景が行全体に広がります。

ここで両方の長所を活かす方法はありますか?

編集

提案に従ってdisplay: inline、私のコードは次のようになりました。

.tag {
    background-color:rgba(0,0,0,0.6);
    font-weight: bold;
    padding: 5px;
    margin-top: 10px;
    display: inline;
}

このページの右側にどのように表示されるかを確認できます。

Answer 1

display:blockとdisplay:inlineは異なります...デフォルトのDIVはブロックです...スパンはインラインです。ただし、display:属性を使用してデフォルトの動作を変更できます。