CSS · Box Model & Layout

Display Property

Control how elements behave in the document flow

Find videos you like?

Save to resource drawer for future reference!

The Display Property

How elements flow and behave

Display = Element Behavior

The display property controls how an element participates in the layout. Does it take full width? Can it sit next to other elements? Does it create a new line? This property answers all these questions.

Key Question

"How should this element behave in the page layout?"

• Should it take the full width?

• Can other elements sit beside it?

• Does it start on a new line?

• Can you set its width and height?

Common Display Values

The four most-used display types

block

Full Width

Takes full width available. Starts on a new line. Can set width/height.

display: block;

Block Element (Full Width)

Another Block Element

Examples: <div>, <p>, <h1>, <section>

inline

Flows with Text

Only takes needed width. Sits next to other inline elements. Cannot set width/height.

display: inline;

This is text with inline element and another one flowing together.

Examples: <span>, <a>, <strong>, <em>

inline-block

Best of Both

Sits next to other elements BUT you can set width/height. Perfect hybrid!

display: inline-block;

Box 1

Box 2

Box 3

Common for: Buttons, navigation items, card grids

none

Hidden

Element is completely removed from the layout. No space reserved.

display: none;

Visible

(removed)

Visible

Common for: Hiding elements, modals, dropdown menus

Interactive Display Demo

See how different display values behave

Display Property Comparison

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="container">
      <h1>📐 Display Property Demo</h1>
      <div class="section">
        <div class="label label-block">display: block</div>
        <div class="block-demo">
          <div>Block Element 1 (Takes full width)</div>
          <div>Block Element 2 (New line)</div>
          <div>Block Element 3 (New line)</div>
        </div>
        <div class="note">
          Notice: Each element takes the full width and starts on a new line
        </div>
      </div>
      <div class="section">
        <div class="label label-inline">display: inline</div>
        <div class="inline-demo">
          <span>Inline 1</span>
          <span>Inline 2</span>
          <span>Inline 3</span>
          <span>Inline 4</span>
        </div>
        <div class="note">
          Notice: Elements flow together like text, wrapping when needed
        </div>
      </div>
      <div class="section">
        <div class="label label-inline-block">display: inline-block</div>
        <div class="inline-block-demo">
          <div>Box 1</div>
          <div>Box 2</div>
          <div>Box 3</div>
          <div>Box 4</div>
        </div>
        <div class="note">
          Notice: Elements sit next to each other BUT have set width/height
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Modern Display Values

Powerful layout systems

flex

Flexbox

Creates a flexible container for arranging items in one direction

display: flex;

Perfect for: Navigation bars, card layouts, centering

grid

Grid

Creates a two-dimensional grid system for complex layouts

display: grid;

Perfect for: Page layouts, image galleries, dashboards

Modern Approach

Today, most layouts use Flexbox or Grid instead of float or inline-block. They're more powerful and easier to work with!

Remember

block - Full width, new line, can set dimensions

inline - Flows with text, cannot set width/height

inline-block - Sits inline BUT can set dimensions (best of both!)

flex/grid - Modern powerful layout systems

Previous Topic

The Box Model

Understanding margin, border, padding, content, box-sizing, and the complete box model.

Next Topic

Positioning

Static, relative, absolute, fixed, sticky positioning, inset properties, and position-anchor.

Ask a Question

Have a question about Display Property? Ask our AI assistant.

🔐 Login to use AI Assistant

CSS · Box Model & Layout

Display Property

Control how elements behave in the document flow

Find videos you like?

Save to resource drawer for future reference!

The Display Property

How elements flow and behave

Display = Element Behavior

Key Question

"How should this element behave in the page layout?"

• Should it take the full width?

• Can other elements sit beside it?

• Does it start on a new line?

• Can you set its width and height?

Common Display Values

The four most-used display types

block

Full Width

Takes full width available. Starts on a new line. Can set width/height.

display: block;

Block Element (Full Width)

Another Block Element

Examples: <div>, <p>, <h1>, <section>

inline

Flows with Text

Only takes needed width. Sits next to other inline elements. Cannot set width/height.

display: inline;

This is text with inline element and another one flowing together.

Examples: <span>, <a>, <strong>, <em>

inline-block

Best of Both

Sits next to other elements BUT you can set width/height. Perfect hybrid!

display: inline-block;

Box 1

Box 2

Box 3

Common for: Buttons, navigation items, card grids

none

Hidden

Element is completely removed from the layout. No space reserved.

display: none;

Visible

(removed)

Visible

Common for: Hiding elements, modals, dropdown menus

Interactive Display Demo

See how different display values behave

Display Property Comparison

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="container">
      <h1>📐 Display Property Demo</h1>
      <div class="section">
        <div class="label label-block">display: block</div>
        <div class="block-demo">
          <div>Block Element 1 (Takes full width)</div>
          <div>Block Element 2 (New line)</div>
          <div>Block Element 3 (New line)</div>
        </div>
        <div class="note">
          Notice: Each element takes the full width and starts on a new line
        </div>
      </div>
      <div class="section">
        <div class="label label-inline">display: inline</div>
        <div class="inline-demo">
          <span>Inline 1</span>
          <span>Inline 2</span>
          <span>Inline 3</span>
          <span>Inline 4</span>
        </div>
        <div class="note">
          Notice: Elements flow together like text, wrapping when needed
        </div>
      </div>
      <div class="section">
        <div class="label label-inline-block">display: inline-block</div>
        <div class="inline-block-demo">
          <div>Box 1</div>
          <div>Box 2</div>
          <div>Box 3</div>
          <div>Box 4</div>
        </div>
        <div class="note">
          Notice: Elements sit next to each other BUT have set width/height
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Modern Display Values

Powerful layout systems

flex

Flexbox

Creates a flexible container for arranging items in one direction

display: flex;

Perfect for: Navigation bars, card layouts, centering

grid

Grid

Creates a two-dimensional grid system for complex layouts

display: grid;

Perfect for: Page layouts, image galleries, dashboards

Modern Approach

Today, most layouts use Flexbox or Grid instead of float or inline-block. They're more powerful and easier to work with!

Remember

block - Full width, new line, can set dimensions

inline - Flows with text, cannot set width/height

inline-block - Sits inline BUT can set dimensions (best of both!)

flex/grid - Modern powerful layout systems

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

The Box Model

Positioning

Building Your Learning Module...

Display Property

Display = Element Behavior

Key Question

Display Property Comparison

Flexbox

Grid

Modern Approach

Remember

The Box Model

Positioning

Display Property

Display = Element Behavior

Key Question

Display Property Comparison

Flexbox

Grid

Modern Approach

Remember