Html 在a<;内创建跨度作为颜色框;p>;标签

Html 在a<;内创建跨度作为颜色框;p>;标签,html,css,Html,Css,我有以下代码: <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 so

我有以下代码:

<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>
颜色:

小提琴是

我试图创造以下效果:


为什么这不显示span中的颜色框?

显示:内联块

应该是:

显示:内联块(连字符而不是下划线)

始终确保打开浏览器的开发工具,以便轻松找到这些类型的错误。例如,在Chrome中,检查
元素会在
显示:inline_块旁边显示一条“无效属性值”警告