CSS Academy · Lesson

Block vs Inline vs Inline-Block

Understand the differences between block, inline, and inline-block display behaviors.

Block vs Inline vs Inline-Block is a free CSS Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

The display Property

The display property is one of the most fundamental in CSS. It determines how an element participates in the layout flow — whether it creates a block-level box, an inline box, or something in between.

Block Elements

Block elements start on a new line and stretch to fill their container's full width. You can set width, height, margin, and padding on all sides.

Default block elements: div, p, h1-h6, section, article.

div {
  display: block;
  width: 80%;    /* respected */
  margin: 0 auto; /* centers it */
}

Inline Elements

Inline elements flow inside text. They do not start a new line. Setting width or height has no effect. Top/bottom margin is ignored; horizontal margins and padding work.

Default inline elements: span, a, strong, em, img.

span {
  display: inline;
  /* width: 200px — has NO effect */
  color: blue;
}

Inline-Block Elements

display: inline-block is a hybrid. Elements flow inline (no forced line break) but support width, height, and all box model properties like block elements.

a.btn {
  display: inline-block;
  width: 120px;
  height: 40px;
  padding: 8px 16px;
  text-align: center;
}

Inline-Block for Navigation

Before Flexbox, inline-block was used for horizontal navigation bars. A downside: whitespace in HTML source creates small gaps between items.

li {
  display: inline-block;
  padding: 0 16px;
}

Removing the Inline Gap

The whitespace gap between inline-block elements can be removed by setting font-size: 0 on the parent and restoring it on children, or by eliminating whitespace in HTML.

ul {
  font-size: 0;
}
li {
  display: inline-block;
  font-size: 1rem;
}

Replacing Inline-Block with Flex

In modern CSS, display: flex on the parent is the preferred way to achieve horizontal layouts without whitespace issues. inline-block is still useful for single-element sizing.

Changing Display

Any element's display type can be changed with CSS. This is commonly used to make links button-shaped or to make list items horizontal.

a.button {
  display: inline-block;
  padding: 10px 20px;
}

li {
  display: inline; /* horizontal list */
}

Table Display Values

CSS provides display: table, display: table-row, display: table-cell, etc. to apply table layout to non-table elements. Rarely needed today but useful for vertical centering in older contexts.

Flow Root: display: flow-root

display: flow-root creates a new block formatting context without the side effects of overflow: hidden. It clears floats and prevents margin collapse from leaking out of a container.

.clearfix {
  display: flow-root;
}

Anonymous Boxes

When block and inline elements are mixed as siblings, the browser wraps orphaned inline content in anonymous block boxes. This is invisible behavior but explains unexpected layout shifts.

Quick Check

Which display value allows setting width while keeping the element in the inline flow?

Recap

Block elements take full width and start a new line. Inline elements flow with text and ignore width/height. Inline-block combines both: flows inline but accepts width and height. Modern layouts prefer Flexbox and Grid over inline-block grids.

Frequently asked questions

Is the “Block vs Inline vs Inline-Block” lesson free?

Yes — the full text of “Block vs Inline vs Inline-Block” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Block vs Inline vs Inline-Block”?

Understand the differences between block, inline, and inline-block display behaviors. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Block vs Inline vs Inline-Block” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to CSS Academy