Why margin top does not work in Tailwind CSS?

Question

I am trying to top margin mt-10 in first but it is not working. However, if I give that expression as mx-10- it is working.

<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

When it comes to margins and padding, browsers treat inline elements differently. You can add space to the left and right on an inline element, but you cannot add height to the top or bottom padding or margin of an inline element. Give the <a> tags an inline-block class to solve this problem.

<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>

Related Links: Margin Properties