使用<span>和<div>创建带边距的文本背景</div> </span>

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;
}

您可以在this page右侧看到它的显示方式。

Answer 1

display:block和display:inline不同...默认情况下，DIV是块... spans是内联的。但是，您可以使用display:属性

更改默认行为