How to give margin top in tailwind css to a image?

Question

How to give margin top in tailwind css to a image? i want the logo image show me clearly visible but its not properly seen so how to do that i think if i give margin top to the image it will be clear so how to do that in tailwind css?

my code

 <div className="flex-shrink-0 mr-4">
            {/* Logo */}
             <img src={logo} class="rounded-full -mt-10 md:-mt-16 ml-3 md:ml-0 h-20 w-20 md:h-25 md:w-25 border-[6px] border-white bg-white "/>
          </div>

Answer 1

update your code to this,

  <div className="flex-shrink-0 mr-4">
    <img src={logo} class="rounded-full md:-mt-16 ml-3 md:ml-0 h-20 w-20 md:h-25 md:w-25 border-[6px] border-white bg-white "/>
</div>

I removed the -mt-10 previously in the img tag, which gave it a negative margin and made it not totally visible.

You can check the tailwind documentation for a more comprehensive way of doing things at [tailwind][1]

Also, add the mt-[value] to the img itself. [1]: https://tailwindcss.com/docs/margin

Answer 2

Remove The md:-mt-16 & -mt-10 you are pushing it up with it.

Update:Adding mt-2

 <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" /> <div className="flex-shrink-0 mr-4"> <img src="https://www.tailorbrands.com/wp-content/uploads/2020/07/mcdonalds-logo.jpg" class="rounded-full ml-3 mt-10 md:ml-0 h-20 w-20 md:h-25 md:w-25 border-[6px] border-white bg-white " /> </div>