title: creating a span as color box inside a <p> tag
body: <p>I have the following code:</p>
  <pre><code>&lt;p style=&quot;font-size: 12px;line-height: 24px;font-weight: normal;color: #848484;padding: 0;margin: 0;&quot;&gt;&lt;b&gt;COLOR:&lt;/b&gt; &lt;span style=&quot;width: 15px; height: 15px; margin:auto; display: inline_block; border: 1px solid gray; vertical-align: middle; border-radius: 2px; background: #FF0000 &quot;&gt;&lt;/span&gt; &lt;/p&gt;
  </code></pre>
  <p>The fiddle is <a href="http://jsfiddle.net/R6kDp/" rel="noreferrer">here</a></p>
  <p>And I am trying to create the following effect:</p>
  <p><img src="https://i.stack.imgur.com/zz4WF.png" alt="enter image description here" /></p>
  <p>Why isn't this showing up the color box in the span?</p>