# CSS Display Property

# The basic four values

The four basic values used in CSS that you will write are: display: block, inline, inline-block, and none.

• block means that the element fills as much width as it can. Any elements which come before or after it must be on their own line. We are allowed to change the width or height of the element through CSS.
• inline means that the element will collapse to the size of its content. It will not force other elements to move to a new line. We cannot alter the width of the element through CSS.
• inline-block is used as a default value by all images. It is like inline except that you can change the width of the element.
• none tells the browser to hide the element and pretend that it does not exist while creating the layout for the rest of the page.

# Other less used values

There are over 30 other values that are used as default assigned values for specific elements. These values are rarely used outside of their default setting.

div {
  display: table;
  display: table-row;
  display: table-cell;
  display: list-item;
  display: ruby-text;
  /* and many more */
}

MDN reference for the display property

# The New display superstar properties

In the last few years a couple new values for the display property have been added. They have completely changed how people build webpage layouts.

div {
  display: flex;
}
main {
  display: grid;
}

We will be covering these values in much greater detail in a few weeks. If you want to look ahead, here is the first video in a playlist about using them.

FlexBox Intro

CSS Grid Intro