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.
In HTML, the default display property value is taken from the HTML specifications or from the browser/user default style sheet. The default value in XML is inline, including SVG elements.
Show demo ❯
| ? |
| no |
| no. Read about animatable |
| CSS1 |
| object.style.display="none" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the 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.
Note: "display: contents" does not work in Edge prior version 79.
CSS Syntax
Property Values
| inline | Displays an element as an inline element [like ]. Any height and width properties will have no effect | Demo ❯ | ||||||||||||||||||||||||||||||||||
| block | Displays an element as a block element [like ]. 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 | |||||||||||||||||||||||||||||||||||
| flex | Displays an element as a block-level flex container | |||||||||||||||||||||||||||||||||||
| grid | Displays an element as a block-level grid container | |||||||||||||||||||||||||||||||||||
| 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 | |||||||||||||||||||||||||||||||||||
| inline-flex | Displays an element as an inline-level flex container | |||||||||||||||||||||||||||||||||||
| inline-grid | Displays an element as an inline-level grid container | |||||||||||||||||||||||||||||||||||
| inline-table | The element is displayed as an inline-level table | |||||||||||||||||||||||||||||||||||
| list-item | Let the element behave like a | Demo ❯ | ||||||||||||||||||||||||||||||||||
| run-in | Displays an element as either block or inline, depending on context | |||||||||||||||||||||||||||||||||||
| table | Let the element behave like a
More ExamplesExampleA 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 { .b { Try it Yourself » ExampleA demonstration of how to use the inherit property value: body { p { Try it Yourself » ExampleSet the direction of some flexible items inside a element in reverse order: div { Try it Yourself » Related PagesCSS tutorial: CSS Display and visibility HTML DOM reference: display property What is meant by display block in HTML?display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise [by adding a float declaration to another element, for instance].
Is div display blocked?The
element is a block-level element.
How do you display text code in HTML?Basically, there are two methods for displaying HTML tags as plain text.. Using element: Plaintext element is deprecated which means this feature is no longer supported. ... . HTML entities: The second and only option available is using html entities. < ,>. Chủ Đề |