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

Question

我正在尝试提高利润率mt-10，first但它不起作用。然而，如果我将这个表达式表述为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>

相关链接：保证金属性