Skip to main content

2 posts tagged with "display-property"

View All Tags

My Div Says 'Test' But Takes Up the Whole Width? Understanding Block Elements and Content Size

· 10 min read
Mahmut Salman
Software Developer

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.

Why Adding 'block' to My Label Changed Everything: Understanding CSS Display Property

· 11 min read
Mahmut Salman
Software Developer

I'm learning frontend after years of backend work, and I just discovered something fundamental that nobody explains clearly: the display property. I added block to my label, and suddenly my form inputs stacked vertically instead of sitting side-by-side. I had no idea what I just did. 🤯 My frontend mentor explained how block, inline, and inline-block are the foundation that flexbox and grid are built on. This conversation changed everything.