2 posts tagged with "inline-block"

I added a child div with just "Test" in it. It's centered perfectly, but when I inspect it in DevTools, the content area is HUGE! 🤔 The div stretches across the entire width even though the text is tiny. I get why it happens (block elements take full width), but shouldn't the div just be the size of "Test"? This conversation taught me the fundamental difference between block-level and inline-level elements—and exactly how to fix it.

I removed flex from my button container, expecting them to stack vertically, but they're still sitting side-by-side! 🤨 I thought flex was what made them horizontal. My frontend mentor corrected my misunderstanding: buttons are inline-block by default, which means they naturally sit beside each other. This conversation taught me the crucial difference between "happens to be side-by-side" and "controlled side-by-side layout."