CSS display Property

Description

The CSS display property is used to control how an HTML element is rendered on a web page. It defines the type of box model an element should generate, affecting its layout and visibility. Common values for the display property include "block," which makes an element behave as a block-level element, causing it to take up the full width of its parent container and start on a new line, and "inline," which allows elements to flow inline with text and other inline elements. There are also values like "none" to completely hide an element and "flex" or "grid" for more advanced layout options. By adjusting the display property, web developers can precisely control the positioning and behavior of elements on a webpage.

Initial value
inline
Applies to
All elements
Inherited
No
Computed value
Specified value, except for floats, root elements and positioned elements
Animatable
No
JavaScript syntax
object.style.display

Interactive Demo

One
Two
Three

Syntax

display: inline | block | inline-block | list-item | run-in | compact | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group | none

Values

  • inlineThe element generates one or more inline element boxes.
  • blockThe element generates a block element box.
  • inline-blockThe element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would)
  • list-itemThe element generates a block box for the content and a separate list-item inline box.
  • run-inEither one or more block-level, block container boxes, or one or more inline-level, inline container boxes, depending on context
  • compactEither one or more block-level, block container boxes or a single marker box, depending on context
  • marker
  • tableSee the Tables module
  • inline-tableSee the Tables module
  • table-row-groupSee the Tables module
  • table-header-groupSee the Tables module
  • table-footer-groupSee the Tables module
  • table-rowSee the Tables module
  • table-column-groupSee the Tables module
  • table-columnSee the Tables module
  • table-cellSee the Tables module
  • table-captionSee the Tables module
  • rubySee the Ruby module
  • ruby-baseSee the Ruby module
  • ruby-textSee the Ruby module
  • ruby-base-groupSee the Ruby module
  • ruby-text-groupSee the Ruby module
  • flexGenerates a block element for laying out content in the flexbox model. This is a flexbox model value in CSS3.
  • inline-flexGenerates an inline element for laying out content in the flexbox model. This is a flexbox model value in CSS3.
  • noneTurns off the display of an element (it has no effect on layout); all descendant elements also have their display turned off. The document is rendered as though the element did not exist.

Example

<div>Block 1</div> 
<div>Block 2</div>
<div>Block 3</div>
<div>Block 4</div>
<div>Block 5</div>
<div>Block 6</div>
<div>Block 7</div>
<div>Block 8</div>
<div>Block 9</div>
<div>Block 10</div>
<div>Block 11</div>
<div>Block 12</div>
div {
   display: inline-block;
   width: 200px; 
   background-color: orange;
   text-align: center;
   border: 3px solid green;
   margin-bottom: 10px; 
}

Browser Support

The following table will show you the current browser support for the CSS display property.

Desktop
Edge Chrome Firefox Opera Safari
121171
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.11137

Last updated by CSSPortal on: 1st January 2024