Version:

    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.

    display-diagram-type-as-shape.svg

    display-table-diagram-shape.svg

    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

    DX8 knowledge base icon

    Frequently asked questions

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    To raise a ticket, sign into Acquia Cloud and select Help in the top menu.

    Raise support ticket

    Acquia

    Copyright © 2020 Acquia, Inc. All Rights Reserved. Drupal is a registered trademark of Dries Buytaert.