Codectionary / Developer documentation / CSS

display Property

The display property determines how an element generates boxes and participates in layout. block elements start on a new line and fill available width. inline elements flow within text and ignore width/height. inline-block combines inline flow with block-like sizing control. none removes the element from layout entirely.

Syntax

display: block | inline | inline-block | none | flex | grid;

Examples

block vs inline vs inline-block

The fundamental difference in how each value affects layout flow.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-tile{padding:1rem;background:#fef3c7;color:#422006;border:1px solid #d97706}.preview-frame{border:1px dashed #94a3b8;padding:1rem;margin-block:1rem}

.block { display: block; width: 200px; }      /* own line, respects width */
.inline { display: inline; width: 200px; }     /* flows in text, IGNORES width */
.inline-block { display: inline-block; width: 200px; } /* flows in text, respects width */
  1. Inline text continues within the line and does not take the declared width in the same way.
  2. inline-block remains in the line but accepts a box width.
  3. The block occupies a separate block-level position; compare each with its surrounding text.
HTML used by this example
<p>Before <span class="inline preview-tile">inline</span> after.</p><p>Before <span class="inline-block preview-tile">inline-block</span> after.</p><div class="block preview-tile">block</div>

Hiding Elements

display: none vs the related visibility: hidden.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;margin-block:1rem}.preview-tile{padding:1rem;background:#fef3c7;color:#422006;border:1px solid #d97706}.preview-frame{border:1px dashed #94a3b8;padding:1rem;margin-block:1rem}

.gone { display: none; }       /* removed from layout entirely - other elements shift to fill the space */
.invisible { visibility: hidden; } /* stays in layout, just invisible - still takes up space */
  1. The display:none item has no layout box.
  2. The invisible item keeps its layout space even though its contents are hidden.
  3. Remove either declaration and rerun to compare the gaps.
HTML used by this example
<div class="preview-row"><span class="preview-tile">Before</span><span class="gone preview-tile">display:none</span><span class="invisible preview-tile">visibility:hidden</span><span class="preview-tile">After</span></div>

Parameters and values

  • block (keyword): Starts on a new line, fills available width
  • inline (keyword): Flows within text, ignores width/height
  • inline-block (keyword): Flows within text but respects width/height
  • none (keyword): Removes the element from layout entirely
  • flex / grid (keyword): Turns the element into a flex or grid container

Best practices

  • Use display: none to fully remove content from layout and accessibility tree; use visibility: hidden to hide visually while keeping the space reserved
  • Remember width/height have no effect on elements with display: inline - switch to inline-block or block if you need to size them
  • Default HTML elements already have sensible display values (div is block, span is inline) - only override when you have a specific layout need

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading