Display properties
Set the type of box used to render an element.
Display
Options and behavior:
- Inline - Set the element to display inline
- Inline-block - Set the element to display inline as a block. Inline-block elements can be given a width and height
- Block- Set the element to display as a block. Block elements can be given a width and a height
- None- Turn off the display of the element and all of its children
- Table- Set the element to behave like a table element
- Table-cell - Set the element to behave like a table-cell <td> element
- Flex - Set the element to a flex container
- Inline-flex - Sets the element to an inline flex container
For a useful guide on Flexbox see https://css-tricks.com/snippets/css/a-guide-to-flexbox/
See the diagram below to help you understand the affects of these properties.
Visibility
Options and behavior:
- Visible - Set the element to be visible on the page
- Hidden - Hide the element so that it won't appear
- Collapse - Removes a row or column in a table. This is only relevant for table elements. If selected on a non-table element, they will instead be hidden.
Overflow
Options and behavior:
- Visible - Set the element to be visible on the page
- Hidden - Hide the element so that it won't appear
- Scroll - Overflow content is hidden, but a scroll bar is added to view it
- Auto - Adds a scroll bar to view overflow content by default.
X-overflow
Set what happens to the overflow content of an element to its left and right.
Options and behavior:
- Visible - Overflow content is visible outside the content box
- Hidden - Overflow content outside the content box is hidden
- Scroll - Overflow content is hidden, but a scroll bar is added to view it
- Auto - Adds a scroll bar to view overflow content by default.
Y-overflow
Set what happens to the overflow content of an element at its top and bottom.
Options and behavior:
- Visible - Overflow content is visible outside the content box
- Hidden - Overflow content outside the content box is hidden
- Scroll - Overflow content is hidden, but a scroll bar is added to view it
- Auto - Adds a scroll bar to view overflow content by default.
Find more information at https://www.w3schools.com/cssref/pr_class_display.asp
