Introduction

So far you've learned about the flex and grid display property values. There are several others that are important to understand. This page will introduce some of these.

In case you missed earlier parts in this series, visit:
Part 1: An Intro to CSS
Part 2: How to Link a Stylesheet to Your index.html File
Part 3: Selectors
Part 4: Properties
Part 5: The Box Model
Part 6: CSS Units
Part 7: Flexbox
Part 8: CSS Grid

Understanding the Display Property Values

Below is a list of the most common display property values, other than flex and grid from parts eight and nine of this series:

block: An element takes up its own space, meaning it covers the entire width of the page and neighboring elements are positioned to either side (above and below, most generally) of the element


inline: An element does not generate line breaks before or after itself. In a normal layout, the next element will be on the same line if there is space


inline-block: Similar to inline, except that you're able to assign a height and width


table: An element behaves like the table html tag


none: An element is removed from the DOM without being deleted. Surrounding elements will fill in to the space of the element with the display property value of none. Often paired with Javascript to make element disappear and appear at the click of a button.

These are just a few of the most common display property values that you will work with. For an exhaustive list, visit Mozilla Developer Network CSS display

Conclusion

Every HTML element has a default display property value, but you can change them to suit your needs. In this page you learned about several common display property values.