Layout Control

Download css eBook

Syntax

  • display: none | inline | block | list-item | inline-list-item | inline-block | inline-table | table | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | flex | inline-flex | grid | inline-grid | run-in | ruby | ruby-base | ruby-text | ruby-base-container | ruby-text-container | contents;

Parameters

ValueEffect
noneHide the element and prevent it from occupying space.
blockBlock element, occupy 100% of the available width, break after element.
inlineInline element, occupy no width, no break after element.
inline-blockTaking special properties from both inline and block elements, no break, but can have width.
inline-flexDisplays an element as an inline-level flex container.
inline-tableThe element is displayed as an inline-level table.
gridBehaves like a block element and lays out its content according to the grid model.
flexBehaves like a block element and lays out its content according to the flexbox model.
inheritInherit the value from the parent element.
initialReset the value to the default value taken from behaviors described in the HTML specifications or from the browser/user default stylesheet.
tableBehaves like the HTML table element.
table-cellLet the element behave like a <td> element
table-columnLet the element behave like a <col> element
table-rowLet the element behave like a <tr> element
list-itemLet the element behave like a <li> element.

Related Examples

Stats

155 Contributors: 13
Tuesday, July 18, 2017
Licensed under: CC-BY-SA

Not affiliated with Stack Overflow
Rip Tutorial: info@zzzprojects.com

Download eBook