CSS Display

block, inline, inline-block and none.

✍️ 3 exercises + code challenge in this lesson

❮ Previous Next ❯

The display property is the most important property for layout:

block: starts on a new line and takes the full width.
inline: sits in the line of text; width and height are ignored.
inline-block: sits in the line but accepts width, height and vertical padding.
none: removes the element from the page completely.
flex and grid: modern layout systems (covered later).

display: none removes the element and its space. visibility: hidden hides it but keeps the space.

Key Takeaways: CSS Display

Mastering CSS Display helps you write clean and reliable CSS code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

CSS Display Code Example

CSS

<style>
  span.box { display: inline-block; width: 90px; padding: 10px; margin: 4px; background: #2563EB; color: white; text-align: center; }
  a.block  { display: block; background: #CCFBF1; padding: 8px; margin: 8px 0; }
  .hidden  { display: none; }
  .invis   { visibility: hidden; }
</style>

<span class="box">inline-block</span><span class="box">inline-block</span>
<a class="block" href="#">A link displayed as block</a>
<p>Before <span class="hidden">[display:none]</span>after.</p>
<p>Before <span class="invis">[hidden]</span>after.</p>

Free sign-in required · Google login available

CSS Display Practice Exercises

Check what you learned in “CSS Display”.

/ 3 solved

Fill in the blank

Hide the element completely, without keeping its space.

.ad {
  display: ;
}

✓ Correct! Not quite. Try again.

Multiple choice

Which display value lets an element sit in a line but accept width and height?

inline-block inline block none

✓ Correct! Not quite. Try again.

Code challenge

Hide the element with the class "secret".

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.

Finished this lesson?

Mark it complete to track your progress.

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services

CSS Display

💡 Key Takeaways: CSS Display

CSS Display Code Example

CSS Display Practice Exercises

Key Takeaways: CSS Display