css - 为什么 margin top 在 Tailwind CSS 中不起作用？

Question

我试图在 first 中达到 top margin 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>

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>

相关链接:Margin Properties