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

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.

Display properties

You're viewing version 8.1 of this page. View latest (8.2) documentation.

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

Important

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.

Important

Find more information at https://www.w3schools.com/cssref/pr_class_display.asp