HTML & CSS82 min total · 18 parts

CSS Fundamentals: The Box Model, Specificity, Positioning, and Layout

Part 5 of 18 · ~2 min

Normal Flow: Block, Inline, and Inline-Block

Long before Flexbox or Grid show up, every element is already laying itself out one particular way by default, and which way is entirely down to its display value.

`display`	Claims the full row?	Obeys a set `width`/`height`?	Flows alongside other elements?
`block`	Yes, by default	Yes	No — forces a line break before and after
`inline`	No — shrinks to fit its content	No — `width`, `height`, and vertical margin are all discarded	Yes — sits mid-line, like a word
`inline-block`	No — shrinks to fit its content	Yes	Yes

span   { display: inline; }       /* this is <span>'s built-in default — same for <em> and <b> */
h3     { display: block; }        /* and this is what <h3>, <p>, and <li> all start out as */
button { display: inline-block; } /* form controls like <button> and <select> ship with this one */

The card's price sits in a <span>, which is inline by default. Try to line up the price under the image by giving it a fixed width:

.price {
  width: 80px; /* has zero effect while .price stays inline */
  text-align: right;
}

Nothing happens. width sits on the short list of properties an inline box ignores outright, and the price stays exactly as wide as its own text no matter what number you put there. That's the exact confusion behind every "I set a width and the browser just ignored me" bug report — and it's a display problem wearing a disguise, not a specificity problem and not a typo. Switch the price to inline-block (or, in this case, just block, since it's already sitting on its own line inside the card) and the width starts being respected. inline-block earns its keep specifically for the in-between case — an element that needs to sit inline, flowing among other content, while still respecting a size you set on it. A row of small stock-level badges ("Only 3 left", "Back in stock") sitting next to each other inline, each with its own fixed padding, is the shape inline-block exists for.