block

By default many elements' display property is block. Block elements assume all of the available space in one dimension. Typically, this is the horizontal direction, because writing-mode is set to horizontal-tb (horizontal; with a top to bottom flow direction). In some cases, and for some languages (like Mongolian), vertical-lr is the appropriate writing mode.

inline

Inline elements behave differently. They are laid out in line with the current context, writing mode, and direction. They are only as wide as their content, and are placed adjacently wherever there is space to do so. Block elements follow flow direction, and inline elements follow writing direction.

Thinking typographically, it could be said that block elements are like paragraphs and inline elements are like words.

Block elements afford you control over both the horizontal and vertical dimensions of the box. That is, you can apply width, height, margin, and padding to a block element and it will take effect. On the other hand, inline elements are sized intrinsically (so width and height values to not take effect) and only horizontal margin and padding values are permitted. Inline elements are designed to conform to the flow of horizontal placement among other inline elements.

inline-block

A relatively new display property, inline-block, is a hybrid of block and inline. You can set vertical properties, although this isn't always desirable.

none

Of the basic display types, only none remains. This value removes the element from the layout entirely. It has no visual presence, and no impact on the layout of surrounding elements. It is as if the element itself has been removed from the html. Accordingly, browsers do not commmunicate the presence or content of display: none to screenreaders.