Display Properties

Learning objectives#

• Explain block, inline and inline-block
• Hide elements with display: none vs visibility: hidden
• Know that flex and grid are display values
• Change an element’s default display

Explanation#

block: starts on a new line and takes the full width. Width, height, margin and padding all work. Default for div, p, h1, ul.

inline: flows in a line of text. Width and height are ignored and vertical margins do nothing. Default for span, a, strong.

inline-block: sits in a line like inline, but accepts width, height and vertical padding like block. Great for buttons and badges.

none: removes the element completely — no space is kept. visibility: hidden makes it invisible but keeps its space.

flex and grid turn an element into a layout container for its children — covered in the Flexbox and Grid lessons.

Code example: Comparing display values#

1<style>
2  body { font-family: sans-serif; }
3  .box { background: #dbeafe; border: 1px solid #2965f1; margin: 4px; padding: 6px; width: 120px; }
4  .block  { display: block; }
5  .inline { display: inline; }
6  .ib     { display: inline-block; }
7  .gone   { display: none; }
8  .hidden { visibility: hidden; }
9</style>
10

11<p><b>block</b> (new line, width works):</p>
12<span class="box block">A</span><span class="box block">B</span>
13

14<p><b>inline</b> (same line, width ignored):</p>
15<div class="box inline">A</div><div class="box inline">B</div>
16

17<p><b>inline-block</b> (same line, width works):</p>
18<span class="box ib">A</span><span class="box ib">B</span>
19

20<p><b>none vs hidden</b>:</p>
21<span class="box ib">1</span><span class="box ib gone">2</span><span class="box ib">3</span><br>
22<span class="box ib">1</span><span class="box ib hidden">2</span><span class="box ib">3</span>

Block boxes stack vertically at 120px; inline boxes sit on one line ignoring width; inline-block boxes sit side by side at 120px. With none, box 2 vanishes; with hidden, an empty gap remains.

Step-by-step explanation#

1. Spans with display: block stack like divs.
2. Divs with display: inline lose their width and sit in a line.
3. inline-block gives you both: side by side and sized.
4. display: none removes box 2 so 1 and 3 touch.
5. visibility: hidden keeps box 2’s space.

Real-world use case#

Common mistakes#

Best practices#

• Use flex or grid for laying out groups of items
• Use inline-block for single badges or buttons in text
• Use the hidden HTML attribute or display: none to hide content
• Check the computed display value in DevTools when layout looks wrong

Remember this#

Practice exercise#

1nav a {
2  display: inline-block;
3  width: 100px;
4  padding: 10px;
5  text-align: center;
6}

Mini quiz#

Want more? Practise all CSS MCQs · CSS interview questions

Related topics#

My notes#

Saved in this browser.