CSS Tutorial · CSS Layout · Lesson 10 of 19

CSS Display

block, inline, inline-block, none — and the layout modes flex and grid.

The display property

Value	Behaviour
`block`	new line, full width, accepts width/height
`inline`	flows in text; width/height ignored
`inline-block`	flows in text but accepts width/height
`none`	removed from the page entirely
`flex` / `grid`	the element becomes a flex or grid container

Example 1Try it yourself

<style>
  body { font: 14px system-ui, sans-serif; }
  .inline-block { display: inline-block; width: 90px; padding: 8px; background: #dbeafe; text-align: center; }
  a.block { display: block; background: #fef3c7; padding: 6px; margin: 6px 0; }
  .hidden { display: none; }
  .invisible { visibility: hidden; }
</style>
<span class="inline-block">inline-block</span>
<span class="inline-block">inline-block</span>
<a class="block" href="#">A link displayed as a block</a>
<p>Before <span class="hidden">[display: none]</span>|<span class="invisible">[visibility: hidden]</span>| After</p>

visibility: hidden hides an element but keeps its space; display: none removes it.

Test yourself

Which declaration removes an element from the layout completely?

visibility: hidden
display: none
opacity: 0
position: absolute

Show answer

Answer: display: none