Display tab - control how to display elements on you website

You should use this property when you want the element to always start from a new line and occupy the full width of the container while still being able to set the width. Some of the most common uses of block display:

• creating a page layout
• adding headings and paragraphs
• building tables
• creating lists

If you want to create a flexible container that can dynamically adjust its child elements' sizes and positions, choose the flex display. It allows you to align and justify the elements inside the container and provides an easy way to distribute child elements evenly across a row or column. Select flex property for:

• creating a responsive design
• aligning items

Use the inline property if you want the elements to take up only as much space as necessary, and stay in the same line if there is enough space. Elements will be displayed inline with the surrounding content, use it for:

• adding small elements such as buttons, icons, and labels
• images with surrounding text
• horizontal lists, such as navigation menus or product listings
• styling fragments of text differently from the rest paragraph.

Example of display inline*:

*green dashed line informs about how much space the element occupies​​​​​​​​​​​​

Value inline-block is useful in situations where you want to create a block-level element that sits inline with other elements on the same line, while also being able to set a width and height. Some common uses are:

• creating columns of text
• adding inline images with captions
• building horizontal navigation menu

Example of display inline-block*:

*green dashed line informs about how much space the element occupies​​​​​​​​​​​​

Select none to hide elements without deleting and recreating them. It turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements are also hidden.

If the content inside an element is larger than the element itself, it will overflow. To control how content that exceeds the dimensions of an element is displayed, specify the overflow property. Use it if you want to:

• prevent content from overflowing outside the container
• create a scrollable area within a container
• hide content that exceeds the dimensions of an element

Example of overflow scroll*:

*green dashed line informs about how much space the element occupies​​​​​​​​​​​​

Overflow X controls the horizontal overflow of content, while overflow Y controls the vertical overflow. Here's how each property works:

visible - the content is not clipped and is visible outside the element's box

hidden - anything beyond the container's dimensions will be hidden

scroll - the overflow is clipped, and a scrollbar is added to see the rest of the content

auto -  if the content overflows outside its box then that it will be hidden whilst a scroll bar should be visible for users to read the rest of the content

initial - uses the default value (visible)

inherit - element inherits this value of this property from its parent element