[英]How to give margin top in tailwind css to a image?
How to give margin top in tailwind css to a image?如何将顺风 css 中的边距顶部赋予图像? 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?
我希望徽标图像清晰可见,但无法正确看到,所以我认为如果我在图像顶部留出边距,它会很清楚,那么如何在顺风 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>
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.我之前在 img 标签中删除了
-mt-10
,这给了它一个负边距,使它不完全可见。
You can check the tailwind documentation for a more comprehensive way of doing things at [tailwind][1]您可以在 [tailwind][1] 上查看顺风文档以获得更全面的处理方式
Also, add the mt-[value] to the img itself.此外,将 mt-[value] 添加到 img 本身。 [1]: https://tailwindcss.com/docs/margin
[1]: https://tailwindcss.com/docs/margin
Remove The md:-mt-16
& -mt-10
you are pushing it up with it.删除
md:-mt-16
& -mt-10
你用它推它。
Update:Adding mt-2
更新:添加
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.