我将使用哪些 Tailwind 实用程序来使两个跨度中的文本之间没有间距？

Posted 2023-03-06

【中文标题】我将使用哪些 Tailwind 实用程序来使两个跨度中的文本之间没有间距？

【英文标题】：What Tailwind utilities would I use to have no spacing between the text in two spans?

【发布时间】：2022-01-21 18:23:40

【问题描述】：

鉴于此：

    <div>
        <span class="font-extrabold">AAA</span>
        <span class="font-medium">bbb</span>
    </div>

如何让文本显示为 AAAbbb，而 AAA 和 bbb 之间没有多余的空格？

【问题讨论】：

内联父元素在源代码中带有空格的行为很奇怪。您需要修改源代码以删除新行和制表符、添加负边距或为您的父级使用不同的显示方法，例如flex。这可能对解决方案有所帮助：css-tricks.com/fighting-the-space-between-inline-block-elements

@LyndenNoye 该链接导致了解决方案：将class="flex" 放入 div 元素中。如果您将链接放在答案中，我会接受。

谢谢！很高兴链接有所帮助。

【参考方案1】：

内联元素与源代码中出现的空白意外交互。这可能对解决方案有所帮助：css-tricks.com/fighting-the-space-between-inline-block-elements

基本上：

最小化您的 html 以删除空格 拆分开始/结束标签以覆盖新行和缩进 使用每行的开头/结尾来创建新行和缩进 负边距 其他一些技巧... 将父级的显示更改为flex

【讨论】：

将父级的显示更改为flex 为我工作