CSS Display

The display property defines how an element is displayed in the document. It controls the layout behavior of elements: whether they start on a new line, share a line, or act as flex/grid containers.

1) display: block


div { display: block; }
Block element 1
Block element 2

Block elements span the full width available and always start on a new line.

2) display: inline


span { display: inline; }
inline A inline B inline C

Inline elements do not start on a new line. They flow with text and only take up as much width as necessary.

3) display: inline-block


.iblock { display: inline-block; }
Box 1
Box 2
Box 3

Inline-block elements behave like inline (flow in a line) but can have width and height set like block elements.

4) display: none


.hidden { display: none; }
Visible
Hidden (display:none)
Visible again

display:none removes the element completely from the layout (as if it does not exist).

5) display: flex


.flex { display: flex; gap: 8px; }
1
2
3

Flex containers arrange items along a row or column with powerful alignment options.

6) display: grid


.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
A
B
C

Grid containers allow 2-dimensional layouts with rows and columns.

7) display:none vs visibility:hidden


.gone { display: none; }
.invisible { visibility: hidden; }

display:none removes element from layout; visibility:hidden keeps its space reserved but makes it invisible.

Key Notes:

  • Default display values depend on element type (e.g., <div> is block, <span> is inline).
  • Use inline-block when you need inline flow but custom width/height.
  • display:none removes elements; visibility:hidden hides but keeps layout space.
  • Modern layouts often use flex or grid.