Display properties determine how your elements are displayed in the browser. By default, most elements have a display of block, but many others use inline natively instead.

An element with a display block will take up the entire width of its parent container by default. It acts as a "block" that pushes any content that would be next to it, beneath it. Block elements are useful for separating content into groups, and allow for usage of margin properties on their top and bottom sides.

An element with a display of inline will be placed next to other inline elements, as it does not take up the entire width of its parent element - it only takes up the exact amount of space of the content inside of it. An example of an element that is inline by default is the anchor tag: <a></a>. Anchor tags are used to link to other websites and are commonly placed in large bodies of text such as paragraphs. Since the anchor tag has a display of inline, it will be placed "inline" with whatever paragraph text it is associated with, so that the text still flows, but the element possesses the attribute of being able to link elsewhere.

Elements with a display of inline-block only take up the exact amount of space that the content inside of them consist of, but allow you to use margin properties to manipulate the amount of spacing between that element and the text around it.

Finally, elements with display none aren't rendered at all within the browser. They're typically used on elements that aren't supposed to show until a later point in time such as pop-ups and dropdowns. You wouldn't want a pop-up rendered on the screen at all times, you'd only want it rendered when it's ready to be displayed. Therefore, it's safe to put a display of none on the element, then when it's ready, apply a display of block with JavaScript to get the element showing on the screen.