<mark> 文本顺风

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>-tag 的行被“推开”，而没有<mark>-tag 的行更靠近。

全尺寸

小尺寸

x小尺寸

我的问题是

有没有更好（通用）的方式来设置 <mark>-tags 的样式？

Answer 1

您将<mark> 标记设为内联块元素时犯了一个错误。将它设置为display: inline（它应该是什么），你一切都很好。