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

HTML

<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>

CSS

div {
   display: inline-block;
   width: 200px; 
   background-color: orange;
   text-align: center;
   border: 3px solid green;
   margin-bottom: 10px; 
}

Result

Editor