CSS Fundamentals

Display

Control how elements behave, how much space they occupy, and how they flow on the page.

CSS Layout

display: block;
display: inline;
display: inline-block;
display: none;

>_ What Does Display Do?

The CSS display property controls how an element participates in the layout of a webpage — including whether it starts on a new line, sits beside other elements, accepts dimensions, or appears at all.

HTML elements already have default display behavior. For example, headings and paragraphs normally behave differently from links and spans.

CSS lets us change that behavior.

block

Block

Starts on a new line and normally expands across the available width.

inline

Inline

Flows within surrounding text and uses only the space its content needs.

inline-block

Inline-block

Sits beside other elements while still allowing width and height.

none

None

Removes the element from the page’s rendered layout.

>_ display: block

A block element starts on a new line and normally takes up the available width of its container.

block.css

.item {
display: block;
}

Block Example

Block One Block Two

>_ display: inline

Inline elements flow alongside surrounding content instead of automatically starting a new line.

inline.css

.word {
display: inline;
}

Inline Example

HTML CSS JavaScript

>_ display: inline-block

inline-block combines useful characteristics of both block and inline elements.

Elements can remain beside each other while also accepting properties such as width and height.

inline-block.css

.button {
display: inline-block;
width: 120px;
}

Inline-block Example

HTML CSS JS

>_ display: none

Setting an element to display: none removes it from the rendered layout.

hidden.css

.secret {
display: none;
}

Unlike making something transparent, an element using display: none does not reserve its normal space in the layout.

>_ Quick Reference

display: block;

Starts on a new line and normally fills the available width.

display: inline;

Flows with surrounding content and does not behave like a full-width block.

display: inline-block;

Sits inline while allowing dimensions such as width and height.

display: none;

Removes the element from the rendered layout.

🧱

Remember

HTML elements have default display behavior, but CSS can change it. A <span> can become block, and a <div> can become inline — although you should still choose HTML elements based on their meaning.

Ready to Code?

Rearrange the page without changing the HTML.

Use the display property to make some elements stack, some sit side-by-side, and one disappear.

⚡

mC0de Challenge

Control the Layout

Style four groups of elements using different display values and compare how they behave.

✓ Set the .block-item elements to block.
✓ Set the .inline-item elements to inline.
✓ Set the .box elements to inline-block.
✓ Give each .box a width.
✓ Hide the .secret element with display: none.
✓ Experiment by changing one display value and observe the layout.

>_ Challenge accepted. Build it below.

mC0de Interactive Sandbox

Display Challenge

Live Preview

HTML + CSS Input EDIT

Live Result PREVIEW

🧱 Change the display values and watch how the elements move, stack, sit beside each other, or disappear.

✓

Lesson 11 Recap

What You’ve Learned

✓ The display property controls how elements participate in layout.

✓ block elements begin on a new line and normally use available width.

✓ inline elements flow alongside surrounding content.

✓ inline-block can sit beside other elements while accepting dimensions.

✓ display: none removes an element from the rendered layout.

✓ CSS can change an element’s default display behavior.

Layout unlocked! 🧱 You can now control whether elements stack, flow together, behave like boxes, or disappear.

🚀

Nice work!

Finished this lesson? Mark it complete to track your progress.

← Colors HTML & CSS Home Next Lesson → Box Model