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

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

Answer 1

display:block 和 display:inline 是不同的……默认情况下 DIV 是 block ……跨度是内联的。但是，您可以使用 display: 属性更改默认行为