Display Block vs. Inline
What is the Display Property?
Imagine building a lego layout. Some lego blocks are wide and flat, taking up an entire row on their own (Block). Other smaller decorative blocks clip onto existing rows without pushing other blocks to new lines (Inline).In CSS, the display property determines how elements behave in the document layout flow:
block: Starts on a new line and stretches horizontally to fill the entire width of its parent container. Examples: <div>, <h1>, <p>.inline: Flows along with the surrounding text, only taking up as much width as its content. It does *not* start on a new line, and it ignores manual width, height, margin-top, and margin-bottom settings. Examples: <span>, <a>, <strong>.inline-block: A hybrid state. Elements flow inline like text, but they respect manual width, height, and vertical margins.Why does it matter?
Thedisplay property is the foundation of layout structure. Knowing when to use inline-block is key for building horizontal navigation menus, grid cards, and custom buttons that need precise heights and widths but should sit side-by-side.
Syntax Breakdown
display: block; — Enforces full-width block behavior.display: inline; — Enforces text-like inline behavior.display: inline-block; — Enables inline layout with sizing control.Common Mistakes
width and height to a <span> or an <a> tag, only to find the browser ignores it completely. To fix this, change the display mode to display: inline-block; or display: block;!Quick Reference
display — Defines the element layout flow rules.block — Starts new line, occupies full width.inline — Fits inline, ignores block height/width properties.inline-block — Fits inline, respects block height/width properties.Your Task
Change the display state of elements with class `item` by setting the `display` property to `inline-block`.
index.html
Type code above to start the lesson.
Live Preview