Tailwind CSS为什么无法使用margin-top？

Question

我试图设置 first 中的上方边距为 mt-10，但是它不起作用。然而，如果我使用表达式 mx-10，它就可以工作。

<div className="font-bold text-white">
  <a id='first' className="mt-10">Explore</a>
  <a id='second' className="mx-4">Collections</a>
  <a id='third' className="mx-4">Profiles</a>
</div>

- Thompson Billy

---

有时候顶部边距会与上面元素的底部边距重叠。你可以尝试给包裹 <div> 添加内边距，例如 pt-10。 - Ed Lucas

Answer 1

在涉及到边距和内边距时，浏览器会以不同的方式处理行内元素。你可以在行内元素的左右两侧添加间距，但是你不能在行内元素的上下内边距或外边距中添加高度。 给<a>标签添加一个inline-block类，以解决这个问题。

<div className="font-bold text-white">
  <a id='first' className="mt-10 inline-block">Explore</a>
  <a id='second' className="mx-4 inline-block">Collections</a>
  <a id='third' className="mx-4 inline-block">Profiles</a>
</div>

相关链接：边距属性

- mo3n