html - 内にカラーボックスとしてスパンを作成する鬼ごっこ

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;