如何將順風 css 中的邊距頂部賦予圖像？

Question

如何將順風 css 中的邊距頂部賦予圖像？ 我希望徽標圖像清晰可見，但無法正確看到，所以我認為如果我在圖像頂部留出邊距，它會很清楚，那么如何在順風 css 中做到這一點？

我的代碼

 <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

將您的代碼更新為此，

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

我之前在 img 標簽中刪除了-mt-10 ，這給了它一個負邊距，使它不完全可見。

您可以在 [tailwind][1] 上查看順風文檔以獲得更全面的處理方式

此外，將 mt-[value] 添加到 img 本身。 [1]： https://tailwindcss.com/docs/margin

Answer 2

刪除md:-mt-16 & -mt-10你用它推它。

更新：添加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>