Button creates vertical gap in grid, button doesn't

This is possibly a really really dumb question, but why does the button result in a vertical gap in the grid when using a div doesn't?
import React from "react";
import "./styles.css";

export default function App() {
const images = [1, 2, 3, 4, 5, 6,7,8,9];
const aspectRatio = "16/9";
return (
<ul className="group grid transform grid-cols-5 gap-1">
{images.map((image, index) => (
<li
key={image}
style={{ aspectRatio }}
className="cols-span-1 relative transform duration-200 hover:!scale-110 group-hover:scale-100"
>
<button
className="relative h-full w-full"
onClick={() => setCurrentImageIndex(index)}
>
<div className="h-full w-full bg-red-500"></div>
</button>
</li>
))}
</ul>
);
}
import React from "react";
import "./styles.css";

export default function App() {
const images = [1, 2, 3, 4, 5, 6,7,8,9];
const aspectRatio = "16/9";
return (
<ul className="group grid transform grid-cols-5 gap-1">
{images.map((image, index) => (
<li
key={image}
style={{ aspectRatio }}
className="cols-span-1 relative transform duration-200 hover:!scale-110 group-hover:scale-100"
>
<button
className="relative h-full w-full"
onClick={() => setCurrentImageIndex(index)}
>
<div className="h-full w-full bg-red-500"></div>
</button>
</li>
))}
</ul>
);
}
3 Replies
janglad
janglad•13mo ago
With button
No description
janglad
janglad•13mo ago
Same everything but replacing the tag with a div
No description
janglad
janglad•13mo ago
border-none m-0 p-0doesn't change anything fwiw setting it to block fixed it, tho I'm still not 100% on why 😄
Want results from more Discord servers?
Add your server