在<p>标记内创建一个作为颜色框的范围

Question

我有以下代码:

<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>

小提琴在这里

我试图创建以下效果:

为什么不显示跨度中的颜色框？

Answer 1

display: inline_block;

应该:

display: inline-block; (连字符而不是下划线).

务必打开浏览器的开发工具,轻松找到这些类型的错误.例如,在Chrome中,检查<span>元素会在旁边显示"无效的属性值"警告display: inline_block;