Css 使用<；span>；及<；部门>；为带边距的文本创建背景的步骤

我目前正在使用它作为

来设置文本样式

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

然而，当我在它下面添加一些时，所有的边界都相互接触。由于它是一个

，我不能期望它们能够移动，但是如果我使用

或设置文本所在的原始

样式，背景会延伸到整行

这是一种两全其美的方式吗

编辑

根据

display:inline

建议，我的代码现在是：

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

---

您可以看到它如何显示在右侧。

显示：块

和

显示：内联

是不同的。。。默认情况下，div是块。。。跨距是直列的。但是，您可以使用

显示：

属性来更改默认行为

您在页面上提到的问题在哪里？在图像顶部的两个框中，右边的一个框。我希望能够更好地分隔文本。也许可以尝试显示：内联块；我试过了，但似乎“边距”和“显示：内联”不能共存…？当然可以。这也取决于position:属性。绝对相对的。这些事情将导致内联或块的行为不同，但它们可以并且经常共存。您可以考虑使用包装器，并设置宽度，并使用该宽度来定义“内部”div宽度：将它们设置为100%的宽度和宽度。如果是这种情况，则不需要相对或绝对，因为它将继承父div的宽度。