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

【问题标题】：Why margin top does not work in Tailwind CSS?为什么 margin top 在 Tailwind CSS 中不起作用？
【发布时间】：2022-01-26 18:49:13
【问题描述】：

我试图在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>

【问题讨论】：

有时会出现上边距与上方元素的下边距折叠的问题。您可以改为尝试向包装器 <div> 添加填充，例如pt-10.

标签： css reactjs tailwind-css

【解决方案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>