Elements have a default display type that determines how they participate in flow. A block element takes the full width and starts on a new line; an inline element flows within text and ignores width and height. Understanding this explains many “why won’t it size” problems.
Before you start
You should be comfortable with HTML elements and basic CSS. This article covers display types and their behavior.
Step-by-step walkthrough
Step 1: Know the two defaults
Block-level elements such as div and p take the full available width, stack vertically and accept width, height and vertical margins. Inline elements such as span and a flow within a line, so width and height have no effect and vertical margins do not push lines apart.
Step 2: Use inline-block for inline sizing
display: inline-block flows like inline content but accepts width, height and margins. It is useful for a tag or a button-sized element that should sit in a line but have a box. Padding applies horizontally and can overlap lines vertically.
Step 3: Remember margin collapse
Vertical margins of adjacent block elements can collapse into a single margin, which surprises people who expect them to add. Inline elements do not participate in margin collapse, and flex or grid containers disable it for their children.
Worked scenario
The span ignores size until it becomes inline-block.
.label { display: inline; }
.label--box { display: inline-block; width: 80px; height: 24px; }Walk through the example
The first class keeps the element inline, so width and height would be ignored. The second switches to inline-block, so the element takes an 80 by 24 box while still sitting in the text flow. This is the fix when a badge refuses to size.
Common mistake
Setting width or height on an inline element and expecting it to apply, or being confused when two block margins collapse into one. Another is using inline-block for layout when flex would be clearer.
Verify the behavior
Set width on an inline span and confirm it is ignored, then switch to inline-block and confirm it applies. Place two block elements with margins and measure the gap to observe collapse. Compare with a flex container, where margins do not collapse.
Interview exercise
Why does width on a span do nothing?
Answer and reasoning
Because span is inline by default, and an inline box is sized by its content, not by width or height. Those properties do not apply to non-replaced inline elements. Setting display: inline-block or block makes the element a box that accepts them.
Continue learning
Compare layout in Flexbox vs grid and box model in Box sizing. Read the MDN display documentation and try the HTML and CSS interview questions.