CodeNexium.com
CSS Display · codenexium.com

Display

The display property is the most important CSS property for layout. It determines how an element behaves in the document flow.

Demo: Display Values
HTML 
<div class="block">Block element</div>
<span class="inline">Inline</span>
<span class="inline">Inline</span>
<div class="inline-block">Inline-block</div>
<div class="inline-block">Inline-block</div>
<div class="none">Hidden (display: none)</div>
CSS 
.block { display: block; background: #eef2ff; padding: 10px; margin: 4px 0; border: 1px solid #6366f1; }
.inline { display: inline; background: #fef9c3; padding: 4px 8px; margin: 4px; border: 1px solid #f59e0b; }
.inline-block { display: inline-block; background: #ecfdf5; padding: 10px; margin: 4px; border: 1px solid #059669; width: 120px; }
.none { display: none; }
Live Output Window

Display Values

Value Behavior
block Takes full width, starts on new line
inline Flows with text, no width/height control
inline-block Inline flow but respects width/height
none Removed from layout (not visible)
flex Flexbox container
grid Grid container

Block vs Inline

Block Inline
Starts on a new line Stays on the same line
Fills parent width Wraps content width
width/height respected width/height ignored
<div>, <p>, <h1> <span>, <a>, <strong>

Visibility: hidden vs display: none

Demo: hidden vs none
HTML 
<div class="visible">Visible</div>
<div class="hidden">visibility: hidden</div>
<div class="gone">display: none</div>
<div class="visible">After hidden/gone</div>
CSS 
div { padding: 10px; margin: 4px; border: 1px solid #64748b; }
.visible { background: #eef2ff; }
.hidden { visibility: hidden; background: #fef9c3; }
.gone { display: none; background: #fecaca; }
Live Output Window

visibility: hidden hides the element but reserves its space. display: none removes it entirely.

Courses