<code> tag backgournd colour not filling element

Question

I have a code tag containing some rendered JSON and a background-color applied.

The html is just a simple < code> tag containing this, and my CSS for it is:

border: 1px solid #efeffe;
background-color: #6a6a6a;
white-space: pre;
color: white;

Any idea how to get a full background without just targeting text? Using Chrome.

Answer 1

代码标记是内联元素，这意味着应用于它的样式通常只会影响文本本身。您可以通过将display: block;添加到样式声明来将其转换为块。

Answer 2

code是一个内联元素。内联元素将始终以这种方式显示其背景。你可以让它“阻止”，但我不会建议它。您可以使用示例代码执行堆栈溢出在您的问题中所做的事情。在<code>标记中填充<pre>元素。 Pre是块级元素，然后您将以您希望的方式显示背景。

Write click and inspect this example to see how its done.

Answer 3

I realised by comparnig it to < pre> that the issue was that this was an 'inline' element and it needed to be block:

display: block;