css - 顺风文本

Question

我正在构建我的第一个 Tailwindcss基于网站。我想修改 <mark>标签使标记的文本看起来更漂亮。

这是我做的:

mark {
    @apply inline-block pr-1 pl-1 py-0;
    margin-top: 0.15rem;
    margin-bottom: 0.15rem;
}

.mark-rounded {
    @apply rounded-sm shadow-md;
}

.mark-teal {
    @apply bg-teal-500  text-white;
}

现在的问题是，如果文本超过几行，选区就会变成一个大框。

还有就是行间距被选区拉大的问题。具有 <mark> 的行-标签被“推开”并且没有<mark>的行-标签靠得更近。

全尺寸

体积小

小尺寸

我的问题是

是否有更好的(通用的)方式来设计 <mark> -顺风标签？

Answer 1

您在制作 <mark> 时犯了一个错误标记内联 block 元素。将其设置为 display: inline (它应该是什么)你们都很好。