W3Schools.com

CSS display Property

Example

Use of some different display values:

p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}

Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The display property specifies the display behavior (the type of rendering box) of an element.

Show demo ❯

Default value: inline Inherited: no Animatable: no. Read about animatable Version: CSS1 JavaScript syntax: object.style.display="none" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property display 4.0 8.0 3.0 3.1 7.0

Note: The values "flex" and "inline-flex" requires the -webkit- prefix to work in Safari, prior version 9.

Note: "display: contents" does not work in Edge prior version 79.

CSS Syntax

display: value;

Property Values

Value Description Play it inline Displays an element as an inline element (like <span>). Any height and width properties will have no effect. This is default. Demo ❯ block Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width Demo ❯ contents Makes the container disappear, making the child elements children of the element the next level up in the DOM Demo ❯ flex Displays an element as a block-level flex container Demo ❯ grid Displays an element as a block-level grid container Demo ❯ inline-block Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values Demo ❯ inline-flex Displays an element as an inline-level flex container Demo ❯ inline-grid Displays an element as an inline-level grid container Demo ❯ inline-table The element is displayed as an inline-level table Demo ❯ list-item Let the element behave like a <li> element Demo ❯ run-in Displays an element as either block or inline, depending on context Demo ❯ table Let the element behave like a <table> element Demo ❯ table-caption Let the element behave like a <caption> element table-column-group Let the element behave like a <colgroup> element table-header-group Let the element behave like a <thead> element table-footer-group Let the element behave like a <tfoot> element table-row-group Let the element behave like a <tbody> element table-cell Let the element behave like a <td> element table-column Let the element behave like a <col> element table-row Let the element behave like a <tr> element none The element is completely removed Demo ❯ initial Sets this property to its default value. Read about initial inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

A demonstration of how to use the contents property value. In the following example the .a container will disappear, and making the child elements (.b) children of the element the next level up in the DOM:

.a {
  display: contents;
  border: 2px solid red;
  background-color: #ccc;
  padding: 10px;
  width: 200px;
}

.b {
  border: 2px solid blue;
  background-color: lightblue;
  padding: 10px;
}

Try it Yourself »

Example

A demonstration of how to use the inherit property value:

body {
  display: inline;
}

p {
  display: inherit;
}

Try it Yourself »

Example

Set the direction of some flexible items inside a <div> element in reverse order:

div {
  display: flex;
  flex-direction: row-reverse;
}

Try it Yourself »

Related Pages

CSS tutorial: CSS Display and visibility

HTML DOM reference: display property

★ +1

Track your progress - it's free!

网址：W3Schools.com https://mxgxt.com/news/view/1671944

随便看看