Color Bold - Creative Color Tools for Designers

CSS Display Property Overview

The CSS display property is one of the most important CSS properties for controlling layout. It determines how an element is displayed on the web page.

Block Element

Inline Element Inline-Block

Common Display Values:

block: Full width, starts on new line
inline: Flows with text, no width/height
inline-block: Flows inline but respects box model
none: Completely removed from layout
flex: Flexible box layout
grid: Grid layout system

Layout Impact:

Controls element positioning
Affects box model behavior
Determines flow of content
Influences responsiveness
Key to modern CSS layouts

Key Concepts:

Every element has a default display value
Display affects how elements interact with each other
Modern layouts use flex and grid extensively
Understanding display is crucial for responsive design

CSS Display Values

CSS provides numerous display values that control how elements behave in the layout.

Display Value	Description	Box Model	Common Use Cases
`block`	Full width, starts on new line	Respects full box model	Headings, paragraphs, sections
`inline`	Flows with text content	Limited box model	Links, spans, emphasis
`inline-block`	Inline flow with box model	Respects full box model	Buttons, form elements
`none`	Completely hidden	No space allocated	Dynamic content, toggles
`flex`	Flexible box layout	Respects full box model	Modern layouts, navigation
`grid`	Grid layout system	Respects full box model	Complex layouts, dashboards
`table`	Table-like behavior	Table box model	Tabular data display

Default Display Values:

/* Common HTML elements and their default display values */
div, p, h1-h6, section, article, header, footer, main, nav, form {
    display: block; /* Default for most structural elements */
}

span, a, strong, em, i, b, mark, small, sub, sup, code {
    display: inline; /* Default for text-level elements */
}

li {
    display: list-item; /* Default for list items */
}

img, input, textarea, select, button {
    display: inline-block; /* Default for replaced elements */
}

table {
    display: table; /* Default for tables */
}

tr {
    display: table-row; /* Default for table rows */
}

td, th {
    display: table-cell; /* Default for table cells */
}

Note: Understanding default display values helps you write more efficient CSS, as you only need to change display values when you want different behavior.

Block Elements

Block-level elements take up the full available width and start on a new line. They respect the full box model.

Block Element Characteristics:

Always start on a new line
Take up the full available width
Respect width, height, margin, and padding properties
Can contain other block and inline elements
Stack vertically by default

Block Element Examples:

Block Element 1 (div)

Block Element 2 (paragraph)

Block Element 3 (section)

Block Element Behavior:

Default Block Behavior

Block 1

Block 2

Block 3

With Fixed Width

Block 1

Block 2

Block 3

/* Block element styling */
.block-element {
    display: block; /* Explicitly set (though usually default) */
    width: 100%; /* Default for block elements */
    margin: 10px 0; /* Vertical margins work normally */
    padding: 15px;
    background: #4e73df;
    color: white;
}

/* Block elements with custom width */
.custom-width {
    display: block;
    width: 300px; /* Fixed width */
    margin: 10px auto; /* Center with auto margins */
    padding: 20px;
}

/* Nested block elements */
.container {
    display: block;
    width: 80%;
    margin: 0 auto;
    padding: 20px;
}

.container .content {
    display: block;
    margin: 10px 0;
    padding: 15px;
}

Inline Elements

Inline elements flow within text content and only take up as much width as necessary. They have limited box model support.

Inline Element Characteristics:

Flow within text content
Only take up necessary width
Do not respect width and height properties
Only horizontal margins and padding work
Cannot contain block-level elements
Line breaks can occur within inline elements

Inline Element Examples:

This is a paragraph with an inline span element and a strong element and a link element flowing within the text content.

Inline Element Limitations:

Inline Elements

Inline 1 Inline 2 Inline 3

Note: Width, height, and vertical margins don't work

Inline with Box Model Attempt

Inline 1 Inline 2

Note: Width and height are ignored, vertical margins don't create space

/* Inline element styling */
.inline-element {
    display: inline; /* Explicitly set (though usually default for spans, links, etc.) */
    /* width and height are IGNORED */
    margin: 0 10px; /* Only horizontal margins work */
    padding: 5px 15px; /* Padding works but may cause overlapping */
    background: #4e73df;
    color: white;
}

/* Text-level inline elements */
strong, em, span, a, code {
    display: inline; /* Default value */
}

/* Inline elements in text flow */
.paragraph {
    font-size: 16px;
    line-height: 1.6;
}

.paragraph .highlight {
    background: yellow;
    padding: 2px 4px; /* Works fine */
    /* margin-top: 10px; Would not work */
    /* width: 100px; Would be ignored */
}

Important: Inline elements cannot contain block-level elements. This is invalid HTML and will cause unexpected rendering behavior.

Inline-Block Elements

Inline-block elements combine the best of both inline and block behavior. They flow inline like text but respect the full box model.

Inline-Block Characteristics:

Flow within text content like inline elements
Respect width, height, margin, and padding like block elements
Do not start on new lines
Can be aligned vertically using vertical-align
Perfect for buttons, form elements, and navigation items

Inline-Block Examples:

Button 1

Button 2

Button 3

Inline-Block vs Other Displays:

Inline (Limited)

Item 1 Item 2

Inline-Block (Full Control)

Item 1 Item 2

/* Inline-block element styling */
.inline-block-element {
    display: inline-block; /* Key property */
    width: 150px; /* Now works! */
    height: 50px; /* Now works! */
    margin: 10px; /* All margins work! */
    padding: 15px 25px;
    background: #4e73df;
    color: white;
    text-align: center;
    vertical-align: middle; /* Control vertical alignment */
}

/* Navigation with inline-block */
.nav-item {
    display: inline-block;
    padding: 12px 20px;
    margin: 0 5px;
    background: #333;
    color: white;
    text-decoration: none;
    border-radius: 4px;
}

.nav-item:hover {
    background: #4e73df;
}

/* Button group */
.button-group {
    text-align: center;
    padding: 20px;
}

.button {
    display: inline-block;
    padding: 10px 20px;
    margin: 0 10px;
    background: #4e73df;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

Inline-Block Tips:

Use for elements that need to flow inline but require box model control
Perfect for navigation menus, button groups, and form elements
Watch for whitespace between elements (can cause gaps)
Use vertical-align to control alignment

Flex Layout (display: flex)

The flex layout provides a more efficient way to lay out, align, and distribute space among items in a container, even when their size is unknown or dynamic.

Flex Container Characteristics:

Creates a flex formatting context
Children become flex items
One-dimensional layout (row or column)
Powerful alignment and distribution controls
Responsive and flexible by design

Flex Layout Examples:

Flex Row (Default)

Flex Item 1

Flex Item 2

Flex Item 3

Flex Column

Flex Item 1

Flex Item 2

Flex Item 3

Flex with Wrapping

Flex Item 1

Flex Item 2

Flex Item 3

/* Flex container */
.flex-container {
    display: flex; /* Creates flex context */
    flex-direction: row; /* row | row-reverse | column | column-reverse */
    justify-content: space-between; /* Main axis alignment */
    align-items: center; /* Cross axis alignment */
    flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
    gap: 20px; /* Space between items */
    padding: 20px;
    background: #f8f9fc;
}

/* Flex items */
.flex-item {
    flex: 1; /* Grow, shrink, basis */
    padding: 20px;
    background: #4e73df;
    color: white;
    text-align: center;
}

/* Specific flex item sizing */
.flex-item-large {
    flex: 2; /* Takes twice the space */
}

.flex-item-fixed {
    flex: 0 0 200px; /* Don't grow, don't shrink, fixed 200px basis */
}

/* Flex navigation */
.nav-flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #333;
    padding: 0 20px;
}

.nav-flex a {
    padding: 15px 20px;
    color: white;
    text-decoration: none;
    transition: background 0.3s;
}

.nav-flex a:hover {
    background: #4e73df;
}

Modern Layout: Flexbox is the modern standard for one-dimensional layouts. It solves many common layout problems that were difficult with older methods like floats and inline-block.

Grid Layout (display: grid)

CSS Grid Layout is a two-dimensional layout system that handles both rows and columns, making it perfect for complex web layouts.

Grid Container Characteristics:

Creates a grid formatting context
Two-dimensional layout (rows and columns)
Precise control over item placement
Powerful responsive capabilities
Ideal for complex page layouts

Grid Layout Examples:

Basic 3×3 Grid

1

2

3

4

5

6

Complex Grid Layout

Header

Sidebar

Main Content

Footer

/* Grid container */
.grid-container {
    display: grid; /* Creates grid context */
    grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
    grid-template-rows: auto; /* Automatic row sizing */
    gap: 20px; /* Space between grid items */
    padding: 20px;
    background: #f8f9fc;
}

/* Grid items */
.grid-item {
    padding: 30px;
    background: #4e73df;
    color: white;
    text-align: center;
}

/* Complex grid layout */
.page-layout {
    display: grid;
    grid-template-columns: 250px 1fr; /* Sidebar and main content */
    grid-template-rows: 80px 1fr 60px; /* Header, content, footer */
    grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer";
    min-height: 100vh;
}

.header { grid-area: header; background: #333; color: white; padding: 20px; }
.sidebar { grid-area: sidebar; background: #f8f9fc; padding: 20px; }
.main { grid-area: main; background: white; padding: 20px; }
.footer { grid-area: footer; background: #333; color: white; padding: 20px; }

/* Responsive grid */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

Grid vs Flexbox:

Use Grid for two-dimensional layouts (rows AND columns)
Use Flexbox for one-dimensional layouts (row OR column)
Grid for overall page structure
Flexbox for components and content within grid areas
They work great together!

None & Visibility Properties

CSS provides ways to hide elements from view, with important differences in how they affect layout and accessibility.

Hiding Methods Comparison:

Method	Description	Layout Impact	Accessibility	Use Case
`display: none`	Completely removes element	No space allocated	Not accessible to screen readers	Dynamic content, toggles
`visibility: hidden`	Hides but preserves space	Space remains allocated	Not accessible to screen readers	Animations, layout preservation
`opacity: 0`	Makes fully transparent	Space remains allocated	Accessible but invisible	Fade animations, interactions

Hiding Examples:

Comparison of Hiding Methods

Visible

Note: The middle element with display: none is completely removed from layout

Visible

Visibility: Hidden

Visible

Note: The middle element with visibility: hidden is invisible but space is preserved

/* Completely remove from layout */
.hidden-completely {
    display: none; /* Element is gone, no space allocated */
}

/* Hide but preserve layout space */
.hidden-preserve-space {
    visibility: hidden; /* Invisible but space remains */
}

/* Make transparent but maintain functionality */
.transparent-but-present {
    opacity: 0; /* Fully transparent */
    pointer-events: none; /* Optional: disable interactions */
}

/* Accessibility-friendly hiding */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Toggle visibility */
.toggle-element {
    display: block; /* or whatever default display */
}

.toggle-element.hidden {
    display: none;
}

/* Fade transition */
.fade-element {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.fade-element.hidden {
    opacity: 0;
    pointer-events: none;
}

Accessibility Note: If you need to hide content from visual users but keep it available for screen readers, use the .sr-only technique rather than display: none or visibility: hidden.

Interactive Display Property Demo

Experiment with different display values to see how they affect element layout and behavior:

Display Value:

Element Width: 150px

Element Height: 80px

Item 1

Item 2

Item 3

Current behavior: block elements stacking vertically

Generated CSS:

display: block;
width: 150px;
height: 80px;

What's Next?

Now that you understand the CSS Display Property, you can explore more advanced topics:

CSS Positioning: Static, relative, absolute, fixed, and sticky positioning
CSS Floats & Clears: Traditional layout techniques
CSS Flexbox Deep Dive: Advanced flexbox properties and techniques
CSS Grid Deep Dive: Advanced grid layout patterns
CSS Responsive Design: Media queries and responsive units

Previous: CSS Box Model Next: CSS Position Property