0Pricing
CSS Academy · Lesson

Block vs Inline vs Inline-Block

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

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 */
}

All lessons in this course

  1. Block vs Inline vs Inline-Block
  2. Visibility vs Display None
  3. Overflow: Scroll Clip and Auto
  4. CSS Reset and Normalize
← Back to CSS Academy