CSS Display = block vs. inline vs. inline-block vs.none | CSS positioning

block ;

Blocking out any element next to it. It takes up the whole screen's left and right.

i.e.) <p>, <h1>~<h6>, <div>, <ol>, <ul>, <li>, <form>

 

inline ;

Do not block other element to appear in the same line. Cannot set the width value.

i.e.) <span>, <img>, <a>

 

inline-block ;

Default. Can change the width value of the element  &&  place them at the same line.

 

None ; 

Hide the element.  Used as ; display : none; 

** Similar to visibility : hidden, but visibility leave the position blank and other elements still flow around it.