Difference between CSS display inline, inline-block, and block

display: inline;        /* Default of all elements, unless UA stylesheet overrides */



  display: inline-block;  /* Characteristics of block, but sits on a line */


  display: block;         /* UA stylesheet makes things like 
 and 
 block */


  display: run-in;        /* Not particularly well supported or common */ 

 display: none;          /* Hide 

 inline
An inline element will accept margin and padding, but the element still sits inline as you might expect. Margin and padding will only push other elements horizontally away, not vertically. 
see in example:
 inline-block
inline-block element is similar to inline both are showing in same line or with flow of text.but in  inline block we can set width and height of element it will not override  other text of any line. It make a block in perticular line with its width and height.

block
 When we use display: block, the element will take up as much space as possible with it width spanning the entire width of its parent element as in here