css - <mark>带顺风的文本

我正在建立我的第一个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>标签？

最佳答案

将您的<mark>标记设置为嵌入式块元素时出错。将其设置为display: inline（应该是），一切都很好。

关于css - <mark>带顺风的文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59552467/