creating a span as color box inside a <p> tag

Question

I have the following code:

<p style="font-size: 12px;line-height: 24px;font-weight: normal;color: #848484;padding: 0;margin: 0;"><b>COLOR:</b> <span style="width: 15px; height: 15px; margin:auto; display: inline_block; border: 1px solid gray; vertical-align: middle; border-radius: 2px; background: #FF0000 "></span> </p>

The fiddle is here

And I am trying to create the following effect:

Why isn't this showing up the color box in the span?

Solution

display: inline_block;

should be:

display: inline-block; (a hyphen instead of an underscore).

Always be sure to open up your browser's dev tools to easily find these types of mistakes. In Chrome, for example, inspecting the <span> element shows an "invalid property value" warning next to display: inline_block;