Abakada CSS Properties Reference: display Attribute

asp.net.ph

CSS Properties Index Positioning Properties

Sets or retrieves whether an object is rendered.

CSS	{ display: display-outside \| display-inside \| display-listitem \| display-internal \| display-box \| display-legacy }
Script	object.style.display = display-outside \| display-inside \| display-listitem \| display-internal \| display-box \| display-legacy

The CSS display property is specified using keyword values, which are grouped into six value categories.

block	Generates a block box, generating line breaks both before and after the element.
inline	Generates one or more inline boxes that do not generate line breaks. The next element will be on the same line if there is space.
run-in	Displays an element as either block or inline, depending on context

flow	Lays out contents using flow layout (block-and-inline layout).
flow-root	Generates a block box that establishes a new block formatting context, defining where the formatting root lies./td>
flex	Displays an element as a block-level flex container
grid	Displays an element as a block-level grid container
ruby	The element behaves like <ruby> elements
table	The element behaves like <table> elements

list-item	Generates a block box and a separate list-item inline box. Behaves like the <li> elements

table-caption	The element behaves like <caption> elements
table-cell	The element behaves like <td> elements
table-column	The element behaves like <col> elements
table-column-group	The element behaves like <colgroup> elements
table-header-group	The element behaves like <thead> elements
table-footer-group	The element behaves like <tfoot> elements
table-row	The element behaves like <tr> elements
table-row-group	The element behaves like <tbody> elements
ruby-base	The element behaves like <rb> elements
ruby-base-container	Elements are generated as anonymous boxes
ruby-text	The element behaves like <rt> elements
ruby-text-container	The element behaves like <rtc> elements

contents	Makes the container disappear, making the child elements children of the element the next level up the document tree
none	Turns off the display of an element

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

The property is read/write with a default value of block for block elements, and inline for inline elements; this attribute is not inherited.

The CSS display property is specified using keyword values.

The keyword values can be grouped into six value categories.

All visible HTML objects are either block or inline. For example, a DIV object is a block element, and a SPAN object is an inline element.

Block elements typically start a new line and can contain other block elements and inline elements. Inline elements do not typically start a new line and can contain other inline elements or data. Changing the possible values for the display property affect the layout of the surrounding content by:

adding a new line after the element with the value block
removing a line from the element with the value inline
hiding the data for the element with the value none

In contrast to the visibility property, display=none reserves no space for the object on the screen.

The table-header-group and table-footer-group possible values can be used to specify that the contents of the THEAD and TFOOT objects are displayed on every page for a table that spans multiple pages.

The following example demonstrates the effects of applying the different values possible for the CSS display attribute.

Show me