为什么缘顶在尾风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>

相关链接：边缘特性