0
161
Vistas¿Cómo dar margen superior en css de viento de cola a una imagen?
¿Cómo dar margen superior en css de viento de cola a una imagen? Quiero que la imagen del logotipo me muestre claramente, pero no se ve correctamente, así que, ¿cómo hacerlo? Creo que si le doy un margen superior a la imagen, quedará claro, ¿cómo hacerlo en Tailwind CSS?
mi código
<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>
·
Santiago Trujillo
2 Respuestas
Responde la pregunta0
actualiza tu código a esto,
<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>
Eliminé el -mt-10 previamente en la etiqueta img, lo que le dio un margen negativo y no lo hizo totalmente visible.
Puede consultar la documentación de Tailwind para obtener una forma más completa de hacer las cosas en [tailwind][1]
Además, agregue el mt-[valor] al img en sí. [1]: https://tailwindcss.com/docs/margin
·
Santiago Trujillo
Denunciar
0
Retire el md:-mt-16 y -mt-10 que está empujando hacia arriba con él.
Actualización: Agregar 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>
·
Santiago Trujillo
Denunciar
Responde la pregunta