CSS Layout Control

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Insert
> Step 2: And Like the video. BONUS: You can also share it!

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.


Got any CSS Question?