block
The default behavior for most structural elements. It creates a vertical flow by occupying all available horizontal space.
- Forces a new line before and after
- Occupies 100% of the parent width by default
- Respects width, height, margin, and padding
“Ideal for primary content blocks like sections, headings, and paragraphs.”
element_a
target_element
element_b
.target { display: block; }inline
Elements sit side-by-side like words in a sentence. They only take up as much space as their contents require.
- Does not force new lines
- Ignores width and height properties
- Vertical margins and padding do not affect the flow of other lines
“Used for styling spans of text, links, or icons within a paragraph.”
preview/display-inline.css
el_a
target_inline
el_b
.target { display: inline; }flex
Provides a powerful system for distributing space and aligning items within a container (the flex container).
- Children automatically become flex items
- Items can grow or shrink to fill space
- Enables high-level alignment (center, space-between, etc.)
“The modern standard for toolbars, navigation menus, and simple grid layouts.”
preview/display-flex.css
item_01
target_item
item_03
.target { display: flex; }grid
A true 2D layout system. It allows you to align content into rows and columns with exact precision.
- Defines explicit columns and rows
- Supports overlapping elements (layering)
- Total control over spacing (gutters/gaps)
“Perfect for complex dashboard UIs and magazine-style asymmetric layouts.”
preview/display-grid.css
cell_01
target_cell
cell_03
cell_04
cell_05
cell_06
.target { display: grid; }inline-block
Combines properties of block and inline. Elements sit side-by-side but respect width/height.
- Sits side-by-side like inline elements
- Respects width, height, and vertical margins/padding
- Does not force a line break
“Useful for buttons, navigation links, and cards that need specific dimensions while remaining side-by-side.”
preview/display-inline-block.css
el_a
target_inline_block
el_b
.target { display: inline-block; }none
Removes the element from the document entirely. It takes up no space as if it didn’t exist.
- Element is removed from document flow
- Does not occupy any space
- Children are also removed
“Commonly used to toggle visibility of dropdowns, modals, or mobile-only elements.”
preview/display-none.css
element_a
element_b
.target { display: none; }