The best CSS display property Tutorial In 2024, In this tutorial you can learn Examples,Attribute definitions and instructions,Browser Support,Property Value,related articles,More examples,
Set paragraph to generate an inline box:
display attribute specifies the type of frame elements should be generated.
Defaults: | inline |
---|---|
inherit: | no |
version: | CSS1 |
JavaScript syntax: | object .style.display = "inline" |
Figures in the table represent the first browser to support the version number of the property.
Immediately following the digital -webkit-, -ms- or -moz- ago in support of the prefix attribute first browser version number.
属性 | |||||
---|---|---|---|---|---|
display | 4.0 | 8.0 Partial from 5.5 |
3.0 | 3.1 | 7.0 |
value | description |
---|---|
none | This element will not be displayed. |
block | This element will be displayed as block-level elements, this element will be the front and rear with a line break. |
inline | default. This element will be displayed as inline elements before and after the element has no line breaks. |
inline-block | Inline block element. (CSS2.1 added value) |
list-item | This element will be displayed as a list. |
run-in | This element will be based on the context display as block-level elements or inline elements. |
compact | CSS has a value compact, but due to the lack of broad support has been removed from the CSS2.1. |
marker | CSS has a value marker, but due to the lack of broad support has been removed from the CSS2.1. |
table | This element will be displayed as a block-level table (similar to <table>), with a line break before and after the table. |
inline-table | This element will be displayed as an inline table (similar to <table>), no line breaks before and after the table. |
table-row-group | This element will be grouped as one or more rows to show (similar to <tbody>). |
table-header-group | This element will be grouped as one or more rows to show (similar to <thead>). |
table-footer-group | This element will be grouped as one or more rows to show (similar to <tfoot>). |
table-row | This element will be displayed as a table row (similar to <tr>). |
table-column-group | This element will be used as one or more columns to display packets (similar to <colgroup>). |
table-column | This element will be displayed as a column of cells (similar to <col>) |
table-cell | This element will be displayed as a table cell (similar to the <td> and <th>) |
table-caption | This element will be displayed as a table header (similar to <caption>) |
inherit | Predetermined display attribute value should inherit from the parent element. |
CSS tutorial: CSS Display and visibility
Use inherited values
This example demonstrates how to use the inherited property.