CSS Display and Visibility Examples

display: block

The `block` display mode makes elements occupy the full width of their container.

Block Element 1
Block Element 2

display: inline

The `inline` display mode allows elements to flow inline with text.

Inline 1 Inline 2 Inline 3

display: inline-block

The `inline-block` display mode combines `inline` and `block` behaviors, allowing elements to flow inline but maintain block-level dimensions.

Inline-Block 1
Inline-Block 2
Inline-Block 3

display: flex

The `flex` display mode creates a flexible layout container.

Flex 1
Flex 2
Flex 3

display: inline-flex

The `inline-flex` display mode allows flexbox layouts to flow inline with text or other elements.

Flex 1
Flex 2
Flex 3

display: grid

The `grid` display mode creates a grid-based layout.

Grid 1
Grid 2
Grid 3
Grid 4
Grid 5
Grid 6

display: none

The `none` display mode hides the element from the layout.

The box above is hidden using `display: none`.

visibility

The `visibility` property controls whether an element is visible, hidden, or collapses (for table elements).

Visible Element
Hidden (Still Takes Space)
Collapsed (for Table Elements)
test tested
test test

The second box is hidden using `visibility: hidden`, but it still occupies space. The third box collapses as it is a table element.

Comparison of Display and Visibility Options

Property Option Behavior
display block Full-width, block-level layout.
display inline Flows inline with text, no block-level behavior.
display inline-block Flows inline but retains block-level dimensions.
display flex Creates a flexible container for child elements.
display inline-flex Inline layout with flexible child alignment.
visibility visible Element is visible and occupies space.
visibility hidden Element is invisible but occupies space.
visibility collapse Element is hidden and collapses (for tables).

Effect of Display Types on Padding and Margin

Different display types affect how padding and margin behave. Below is a visual demo and an explanation table for common display types.

display: inline

Inline elements only respect horizontal padding and margins. Vertical padding and margins don't significantly affect the layout.

Inline Element Inline Element

display: block

Block elements respect both horizontal and vertical padding and margins.

Block Element
Block Element

display: inline-block

Inline-block elements respect padding and margins in all directions while flowing inline.

Inline-Block Inline-Block

display: flex

Flex containers and items respect padding and margins fully. Layout behavior depends on the flex container's properties.

Flex Item 1
Flex Item 2

display: grid

Grid containers and items respect padding and margins fully.

Grid Item 1
Grid Item 2

display: none

Elements with display: none are not rendered, so padding and margin have no effect.

The box above is hidden and doesn't take up space in the layout.

Comparison Table

Display Type Effect on Padding Effect on Margin
inline Horizontal only Horizontal only
block Full (all directions) Full (all directions)
inline-block Full (all directions) Full (all directions)
flex Full (all directions) Full (all directions)
grid Full (all directions) Full (all directions)
none No effect (hidden) No effect (hidden)