The CSS specification defines the default display value for all the elements, e.g. the <div> element is rendered as block, while the <span> element is displayed inline.

Display Block

The block value of the display property forces an element to behave like block-level element, like a <div> or <p> element. The style rules in the following example displays the <span> and <a> elements as block-level elements:

Ex:     

     span   {display: block; }

a    { display: block; }

Display Inline

The inline value of the display property causes an element to behave as though it were an inline-level element, like a <span> or an <a> element. The style rules in the following example displays the <p> and <li> elements as inline-level elements:

Ex:        

  p {    display: inline;  }

ul li {      display: inline; }

Display Inline-Block

The inline-block value of the display property causes an element to generate a block box that will be flowed with surrounding content i.e. in the same line as adjacent content. The following style rules displays the <div> and <span> elements as inline-block:

Ex:

div {  display: inline-block; }

span {display: inline-block; }

Display None

The value ‘none’ simply causes an element to generate no boxes at all. Child elements do not generate any boxes either, even if their display property is set to something other than none. The document is rendered as though the element did not exist in the document tree.

Ex: 

  h1 {display: none; }

p {  display: none; }