CSS Display Property — Block, Inline, Inline-Block, None - MiniCoursey — Quick & Free Mini Courses for Fast Learning

One of the most important CSS properties is display. It controls how elements are rendered on the page and how they interact with each other. Understanding how display works is key to building flexible, predictable layouts. In this MiniCoursey quick guide, you’ll learn the difference between block, inline, inline-block, and none — and when to use each in your designs.

Display: Block

Elements with display: block take up the full width available by default. They always start on a new line. Examples include <div>, <section>, <p>, and <h1>. Use block elements for main content containers and structural layout blocks.


.block-element {
  display: block;
}

Display: Inline

display: inline elements don’t start on a new line. They take up only as much width as needed. Examples are <span>, <a>, <strong>. Inline elements cannot have width or height set directly.


.inline-element {
  display: inline;
}

Display: Inline-Block

inline-block is the best of both worlds: it flows inline with other content but allows width and height to be set. Use it for buttons or small containers that need sizing but stay in line.


.inline-block-element {
  display: inline-block;
  width: 100px;
  height: 50px;
}

Display: None

display: none removes an element from the page entirely — it won’t occupy any space. Use this to hide elements conditionally with CSS or JavaScript.


.hidden {
  display: none;
}

💡 Pro Tip: Use visibility: hidden if you want to hide an element but keep its space reserved.

⚠️ Common Mistake: Setting display: inline and expecting to set width or height won’t work. Use inline-block instead!

FAQ

Q: What is the default display?
A: It depends on the element. <div> is block, <span> is inline by default.

Q: Can I switch display types dynamically?
A: Yes! Toggle classes with JavaScript to switch display for interactive elements like menus or modals.

Where to Learn More

Experiment with different display types to understand how elements behave. MDN’s Display property page is an excellent next stop for more advanced combinations like flex and grid.

Conclusion

Congrats — you now know how to control how elements appear with the CSS Display property. Master this and your layouts will behave just the way you expect!

✨ Bookmark MiniCoursey for more quick & free mini courses!

CSS Display Property — Block, Inline, Inline-Block, None