CSS Display

The display property is one of the most important properties in CSS. It controls how an element is rendered in the page layout — whether it takes up the full width of its line, sits inline with other content, is hidden, or becomes a flex or grid container.

Every HTML element has a default display value. Understanding and changing these values gives complete control over the structure and flow of a page.

Common Display Values

1. display: block

Block elements start on a new line and stretch to fill their parent's full width, regardless of how much content they contain.

Elements that are block by default: <div>, <p>, <h1>–<h6>, <ul>, <li>, <section>, <header>, <footer>.

span {
    display: block;  /* Forces a <span> (normally inline) to behave like a block */
    background-color: lightblue;
    padding: 10px;
    margin-bottom: 8px;
}

2. display: inline

Inline elements sit in the normal flow of text and only take up as much space as their content. Width, height, top/bottom margins, and top/bottom padding have no effect on inline elements.

Elements that are inline by default: <span>, <a>, <strong>, <em>, <img>, <label>.

div {
    display: inline;  /* Makes a block-level <div> flow inline with surrounding text */
}

3. display: inline-block

Inline-block is a combination of both. The element flows inline with other content but also respects width, height, margin, and padding like a block element. This is very useful for creating rows of boxes or buttons.

.badge {
    display: inline-block;
    background-color: #2980b9;
    color: white;
    padding: 5px 14px;
    border-radius: 12px;
    margin-right: 6px;
    font-size: 13px;
}

<span class="badge">HTML</span>
<span class="badge">CSS</span>
<span class="badge">JavaScript</span>

All three badges appear side by side in a row, each with proper padding and sizing.

4. display: none

An element with display: none is completely removed from the page. It takes up no space and is invisible to the user. This is often used for toggling elements (showing/hiding menus, modals, tooltips) with JavaScript.

.modal {
    display: none;  /* Hidden by default */
}

.modal.active {
    display: block;  /* Shown when the 'active' class is added by JavaScript */
}

display: none vs visibility: hidden

• display: none — Element is removed entirely. Space it occupied collapses.
• visibility: hidden — Element is invisible but the space it occupies remains.

.hidden-but-space {
    visibility: hidden;  /* Invisible but still occupies layout space */
}

.truly-gone {
    display: none;  /* Invisible AND space is removed */
}

5. display: flex

Setting display: flex on a container makes its children flexible items that can be aligned and distributed along a row or column. This is covered in full detail in the Flexbox topic.

.nav {
    display: flex;
    gap: 10px;
    align-items: center;
}

6. display: grid

Setting display: grid enables a two-dimensional grid layout for complex page structures. Covered in full detail in the CSS Grid topic.

.page-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 20px;
}

Practical Example — Converting a List to a Horizontal Nav

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    display: inline-block;  /* Each list item appears side by side */
}

nav ul li a {
    display: block;
    padding: 10px 20px;
    color: white;
    background-color: #2c3e50;
    text-decoration: none;
}

nav ul li a:hover {
    background-color: #3498db;
}

Summary

The display property determines how elements occupy space in the layout. block elements take full width and break onto new lines. inline elements sit in text flow but cannot have width or height set. inline-block combines both behaviors. display: none fully removes an element from the page. flex and grid unlock powerful modern layout systems that are covered separately in their own dedicated topics.