CSS Inline, block and none display style

Overview

The CSS display property is one of the most important and frequently used properties in web development. It determines how an element is rendered in the document layout. The three most fundamental values — block, inline, and none — define the core behavior of all HTML elements. Understanding these is essential for controlling page structure and creating responsive designs.

1. Display: Block

Elements with display: block take up the full width available (by default) and start on a new line. They stack vertically, one after another. Common block-level elements include <div>, <p>, <h1>–<h6>, <ul>, <li>, and <section>.

• Width: By default, expands to fill its parent container.
• Height: Depends on content, but can be set explicitly.
• Margins & Padding: Both top/bottom and left/right margins work as expected.
• Line break: Always starts on a new line.

2. Display: Inline

Inline elements do not start on a new line and only take up as much width as necessary. They flow within the text content. Common inline elements are <span>, <a>, <strong>, <em>, and <img>.

• Width: Only as wide as its content; width and height properties have no effect.
• Height: Determined by content; cannot be set explicitly.
• Margins & Padding: Horizontal margins and padding work, but vertical margins (top/bottom) are ignored.
• Line break: Does not force a new line.

Here is some text with an inline element inside it. Notice it doesn't break the line.

3. Display: None

When an element is set to display: none, it is completely removed from the document flow. It is not rendered and does not occupy any space, as if it doesn't exist. This is different from visibility: hidden, which hides the element but still reserves its space.

• Element is not visible.
• No space is allocated for it.
• It does not affect layout.
• Commonly used to show/hide elements dynamically (e.g., with JavaScript).

4. Display: Inline-Block

While not in the basic trio, inline-block is a very useful hybrid. It allows an element to sit inline with text, but it can also have width, height, margins, and padding applied as if it were a block element.

• Flows inline (no line break).
• Respects width and height.
• Vertical margins and padding work.
• Great for creating grids of boxes or navigation items.

Three inline-block boxes sit side by side.

5. Comparison Table

6. Practical Uses

• Block: Layout containers, sections, headings, paragraphs.
• Inline: Emphasizing text, links, inline icons.
• None: Dynamically hiding/showing content (e.g., menus, modals, conditional rendering).
• Inline-block: Navigation menus, grids of cards, button groups, horizontal lists.

7. Common Mistakes

• Setting width on inline elements: It has no effect; use inline-block if you need sizing.
• Forgetting that display: none removes the element completely: Use visibility: hidden if you need the space kept.
• Overusing display: block on inline elements: This can break flow; consider if it's truly needed.
• Not handling whitespace in inline-block: Inline-block elements may have gaps due to HTML whitespace; use font-size: 0 or flexbox to fix.

8. Browser Support

All display values discussed are fully supported in every modern browser, including Chrome, Firefox, Safari, Edge, and Opera. They also work in older browsers (IE 8+ for all values).

Summary

The display property is a cornerstone of CSS layout. Understanding the differences between block, inline, and none — and how inline-block bridges the gap — will give you complete control over how elements are rendered. Master these basics, and you'll be well on your way to building complex, responsive layouts with confidence.