---
title: "Display properties"
date: "2017-11-11T12:39:52+00:00"
summary: "Learn how to control element rendering with display properties. Discover options for inline, block, flex, and table layouts, plus visibility and overflow settings for precise content management."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/display-properties"
id: "f6a48d0a-170c-49b0-8958-cd20979716bc"
---

Table of contents will be added

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/](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

See the diagram below to help you understand the affects of these properties.

![373e552a-display-diagram-type-as-shape.svg](https://acquia.widen.net/content/a7912393-28c1-464d-9359-2fc1595a379f/web/373e552a-display-diagram-type-as-shape.svg)

![e42bb3cf-display-table-diagram-shape.svg](https://acquia.widen.net/content/02094a9c-0445-4409-9b90-436f3d1c3476/web/e42bb3cf-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.

Important

Find more information at [https://www.w3schools.com/cssref/pr\_class\_display.asp](https://www.w3schools.com/cssref/pr_class_display.asp)