Tailwind的space-x-0与mx-0无法消除元素间间距问题

我希望所有div/anchor元素紧密贴合，已尝试在div和anchor上使用m-0、mx-0及space-x-0工具类，但仍无法消除元素间的间隙；虽知晓可采用其他display布局方式，但认为上述Tailwind工具类应能实现元素紧密排列。相关代码示例如下：

<script src="https://cdn.tailwindcss.com"></script>

<nav>
  <div class="h-11 inline-block m-0 text-lg slate-50 bg-slate-500 hover:text-slate-50 hover:bg-slate-800">
    <a href="#" class="p-4">Feed</a>
  </div>
  <div class="h-11 inline-block m-0 text-lg slate-50 bg-slate-500 hover:text-slate-50 hover:bg-slate-800">
    <a href="#" class="p-4">Posts</a>
  </div>
  <div class="h-11 inline-block m-0 text-lg slate-50 bg-slate-500 hover:text-slate-50 hover:bg-slate-800">
    <a href="#" class="p-4">Create</a>
  </div>
  <div class="h-11 inline-block m-0 text-lg slate-50 bg-slate-500 hover:text-slate-50 hover:bg-slate-800">
    <a href="#" class="p-4">Profile</a>
  </div>
</nav>

效果：多个导航按钮间存在明显的水平间隙。

解决办法 #

你遇到的间隙不是margin导致的，是inline-block元素之间的换行/空格字符被浏览器渲染成了空白间隙——这是inline/inline-block元素的默认行为，所以m-0、mx-0这些清margin的工具类自然没用。下面是几种用Tailwind快速解决的方案：

方案1：改用Flex布局（最推荐） #

给父元素nav添加flex类，同时可以去掉子元素的inline-block（flex子元素默认会横向排列，不需要inline-block），这样直接消除间隙：

<script src="https://cdn.tailwindcss.com"></script>

<nav class="flex">
  <div class="h-11 text-lg slate-50 bg-slate-500 hover:text-slate-50 hover:bg-slate-800">
    <a href="#" class="p-4">Feed</a>
  </div>
  <div class="h-11 text-lg slate-50 bg-slate-500 hover:text-slate-50 hover:bg-slate-800">
    <a href="#" class="p-4">Posts</a>
  </div>
  <div class="h-11 text-lg slate-50 bg-slate-500 hover:text-slate-50 hover:bg-slate-800">
    <a href="#" class="p-4">Create</a>
  </div>
  <div class="h-11 text-lg slate-50 bg-slate-500 hover:text-slate-50 hover:bg-slate-800">
    <a href="#" class="p-4">Profile</a>
  </div>
</nav>

方案2：移除HTML中的换行/空格 #

如果不想改布局，把所有div标签连在一起，去掉它们之间的换行和空格，浏览器就不会渲染出间隙：

<script src="https://cdn.tailwindcss.com"></script>

<nav>
  <div class="h-11 inline-block m-0 text-lg slate-50 bg-slate-500 hover:text-slate-50 hover:bg-slate-800">
    <a href="#" class="p-4">Feed</a>
  </div><div class="h-11 inline-block m-0 text-lg slate-50 bg-slate-500 hover:text-slate-50 hover:bg-slate-800">
    <a href="#" class="p-4">Posts</a>
  </div><div class="h-11 inline-block m-0 text-lg slate-50 bg-slate-500 hover:text-slate-50 hover:bg-slate-800">
    <a href="#" class="p-4">Create</a>
  </div><div class="h-11 inline-block m-0 text-lg slate-50 bg-slate-500 hover:text-slate-50 hover:bg-slate-800">
    <a href="#" class="p-4">Profile</a>
  </div>
</nav>

方案3：用负margin快速抵消间隙 #

给父元素添加space-x-[-4px]（数值根据字体大小调整，一般inline-block间隙是4px左右），同时子元素保持inline-block：

<script src="https://cdn.tailwindcss.com"></script>

<nav class="space-x-[-4px]">
  <div class="h-11 inline-block m-0 text-lg slate-50 bg-slate-500 hover:text-slate-50 hover:bg-slate-800">
    <a href="#" class="p-4">Feed</a>
  </div>
  <div class="h-11 inline-block m-0 text-lg slate-50 bg-slate-500 hover:text-slate-50 hover:bg-slate-800">
    <a href="#" class="p-4">Posts</a>
  </div>
  <div class="h-11 inline-block m-0 text-lg slate-50 bg-slate-500 hover:text-slate-50 hover:bg-slate-800">
    <a href="#" class="p-4">Create</a>
  </div>
  <div class="h-11 inline-block m-0 text-lg slate-50 bg-slate-500 hover:text-slate-50 hover:bg-slate-800">
    <a href="#" class="p-4">Profile</a>
  </div>
</nav>

内容的提问来源于stack exchange，提问作者nerdlyist