• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

CSS Display

← Previous Next →

The CSS display property is one of the most important tools in web design. It determines how an HTML element is rendered on the page and how it interacts with other elements. Understanding display is crucial for creating structured layouts, aligning elements, and controlling visibility. In this chapter, you will learn the different display types, how they affect layout, and practical examples of using display in real-world designs.

What Is CSS Display

The display property specifies how an element is visually presented and how it participates in the document flow. It affects:

  • Whether the element generates a block or inline box

  • How it interacts with neighboring elements

  • How children of the element are positioned

By controlling display, you can manage layout structure and responsiveness efficiently.

Why CSS Display Is Important

The display property is fundamental because it directly affects layout behavior. Some reasons it is important include:

  • Controlling whether elements sit inline or block-level

  • Managing visibility and layout for navigation menus, cards, and forms

  • Creating complex layouts with Flexbox or Grid

  • Hiding elements without removing them from the DOM

  • Improving responsive design and user experience

Without understanding display, layouts can behave unpredictably.

Common Display Values

There are several display values, each serving different purposes. The most commonly used are:

  • block

  • inline

  • inline-block

  • none

  • flex

  • grid

  • inline-flex

  • inline-grid

  • table

Block Display

Elements with display: block occupy the full width of their parent container and start on a new line. Common block elements include <div>, <p>, <h1>–<h6>, and <section>.

Example

div {
    display: block;
}

Block elements can have width, height, padding, and margins applied freely.

Inline Display

Inline elements do not start on a new line and only occupy as much width as their content. Common inline elements include <span>, <a>, <strong>, and <em>.

Example

span {
    display: inline;
}

You cannot set width or height on inline elements, but padding and margin affect horizontal spacing.

Inline-block Display

inline-block combines the characteristics of both inline and block elements. The element flows inline with other elements but allows width, height, and vertical padding.

Example

button {
    display: inline-block;
    width: 150px;
    height: 50px;
}

This is commonly used for buttons, navigation links, and cards.

None Display

display: none hides an element completely. It does not occupy space in the layout.

Example

div {
    display: none;
}

This is different from visibility: hidden, which hides the element but keeps its space reserved.

Flex Display

display: flex enables Flexbox layout, allowing you to align and distribute child elements easily.

Example

.container {
    display: flex;
    justify-content: space-between;
}

Flex items can grow, shrink, and align horizontally or vertically without complex calculations.

Inline-flex Display

inline-flex behaves like flex but flows inline with surrounding content.

Example

.nav {
    display: inline-flex;
}

This is useful for horizontal navigation menus with flexible items.

Grid Display

display: grid enables the CSS Grid layout, providing two-dimensional layout control for rows and columns.

Example

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

Grid is powerful for creating structured layouts, galleries, and dashboards.

Inline-grid Display

inline-grid behaves like grid but flows inline with other elements.

Example

.grid-inline {
    display: inline-grid;
    grid-template-columns: repeat(2, 1fr);
}

Table Display

CSS allows block elements to behave like table elements using display: table, display: table-row, and display: table-cell.

Example

.table {
    display: table;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
}

This is useful for creating table-like layouts without <table> markup.

Changing Default Display

Many HTML elements have default display values. For example:

  • <div> → block

  • <span> → inline

  • <ul> → block

You can override defaults using the display property.

Example

ul {
    display: flex;
}

This converts a standard unordered list into a flexible horizontal layout.

Display and Visibility

display affects layout, while visibility only affects visibility.

Example

div {
    display: none; /* Removes element from layout */
}

div {
    visibility: hidden; /* Element remains in layout */
}

Understanding this difference is crucial for dynamic content and animations.

Responsive Design with Display

Display can be controlled with media queries to create responsive layouts.

Example

.menu {
    display: none;
}

@media (min-width: 768px) {
    .menu {
        display: block;
    }
}

This shows a menu only on larger screens.

Display in Real-World Projects

Common use cases for display include:

  • Navigation menus

  • Cards and containers

  • Responsive image galleries

  • Form layouts

  • Modal dialogs and overlays

Control over display ensures layouts behave consistently across devices.

Common Mistakes with Display

  • Confusing inline-block and inline

  • Forgetting to override default display for certain elements

  • Using display: none instead of visibility: hidden when needed

  • Ignoring Flexbox or Grid capabilities

Avoiding these mistakes prevents layout issues.

Best Practices for Using Display

  • Understand default display values for elements

  • Use Flexbox and Grid for modern layouts

  • Use inline-block for combined inline and block behavior

  • Avoid excessive use of display: none for accessibility reasons

  • Test display behavior on multiple screen sizes

Summary of CSS Display

The CSS display property defines how elements are rendered and interact in a layout. Understanding block, inline, inline-block, flex, grid, and none allows you to create structured, responsive, and visually appealing web pages. Proper use of display is essential for both layout control and responsive design, making it one of the most important CSS properties in modern web development.

Practice Questions

Q1. Make a <div> not appear on the page using display.

Q2. Display list items (<li>) inline instead of as a block.

Q3. Create a .menu class that uses Flexbox layout.

Q4. Use display: grid for a container element.

Q5. Set an image to display: block and center it using margin.

Q6. Hide a paragraph using display.

Q7. Change a <span> to act like a block element.

Q8. Show two <div>s side-by-side using display: inline-block.

Q9. Create a class that hides elements and then show them on hover.

Q10. Set a navigation bar to use display: flex.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

CSS

online coding class codepractice

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

codepractice logo
Login
Go Back Top