title: CSS - make paragraph text wrap around image without float
body: <p>I can simply use <code>float</code> to achieve the text wrap around <code>&lt;img&gt;</code> element and I understand that <code>&lt;img&gt;</code> is an inline element and <code>&lt;p&gt;</code> is a block level element so to make them inline, I should either make <code>&lt;p&gt;</code> an inline element or use <code>&lt;span&gt;</code> instead.</p>
  
  <p>The thing is that if I treat them all as inline elements, it leaves a huge white space next to the image and on top of the text.</p>
  
  <p><img src="https://i.stack.imgur.com/Imd2p.png" alt="enter image description here"></p>
  
  <p>I would like to know what causes the blank space. </p>
  
  <p>Here is my <a href="http://jsfiddle.net/sungsoonz/7t633/3/" rel="noreferrer">JS Fiddle</a></p>