CODEWITHSUNDEEP
cssreactjstailwind-css
Thompson Billy
Thompson Billy

Reputation: 91

Why margin top does not work in Tailwind CSS?

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>

Upvotes: 9

Views: 20238

Answers (1)

mo3n
mo3n

Reputation: 1870

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

Upvotes: 7

Related Questions