CSS display Property
CSS display
property specifies the type of rendering box to use for an element.
Usages
The following table outline the usages and version history of this property.
Default value: | inline |
Applies to: | All elements |
Inherited: | No |
Version: | CSS1 |
JavaScript Syntax: | object.style.display = "block" |
Syntax
Here is a syntax for the CSS display
property
display: block | inline | inline-block | list-item | table | table-caption | table-cell |
table-column | table-column-group | table-footer-group | table-header-group |
table-row | table-row-group | run-in | none | initial | inherit;
Property Values
The following table describes the values of this property.
Value | Description |
---|---|
block | The element generates a block element box |
inline | Default. The element generates one or more inline element boxes |
inline-block | The element generates a block box that is laid out, if it were an inline box |
list-item | The element generates a block box for the content and a separate list-item for the list marker |
table | The element behave like <table> element |
inline-table | The element behave like <table> that is laid out if it were an inline box |
table-caption | The element behave like <caption> element |
table-column | The element behave like <col> element |
table-column-group | The element behave like <colgroup> element |
table-header-group | The element behave like <thead> element |
table-row-group | The element behave like <tbody> element |
table-footer-group | The element behave like <tfoot> element |
table-row | The element behave like <tr> element |
table-cell | The element behave like <td> element |
run-in | The element generates a run-in box. Run-in element behave like inline or block, depending on the surrounding elements |
none | Specifies that turn off the display of an element |
initial | Sets default value of this property |
inherit | Inherits this property from its parent element |
Examples
The example below shows to sets display property.
p.one {
display: inline;
}
p.two {
display: block;
}
p.three {
display: inline-block;
}
p.four {
display: none;
}
Browser Compatibility
- Google Chrome 4+
- Mozilla Firefox 3+
- Internet Explorer 8+
- Opera 7+
- Safari 3.1+
Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.