CSS display

Display Values

There are 3 main display values that affect layout:

  • block: Takes up the full width, forcing elements to stack vertically. Height and width can be set.

  • inline: Flows with content, allowing elements to sit next to each other. Height and width cannot be set.

  • inline-block: A mix of block and inline. Allows elements to sit next to each other while also setting height and width.

Block Display

  • Default for most elements like <div>, <p>, etc.

  • Occupies full width.

  • Forces new elements to a new line.

  • Allows setting height and width.

Inline Display

  • Default for elements like <span>.

  • Flows with content.

  • Allows elements to sit next to each other.

  • Height and width cannot be set.

Inline-Block Display

  • Allows elements to sit next to each other horizontally.

  • Also allows setting height and width like a block element.

  • If width is too small, will move to new line.

None Display

Setting display: none; will make the element disappear from the page. Useful for hiding elements.


Key takeaway: to modify element’s layout we use 3 types of value for the display property. Block, which stacks vertically and allows modify height and width; Inline, stacks horizontally but won’t allow modifying height and width; Inline-block, stacks horizontally and allows modify height and width. If display is set to none the element will visually disappear.