Question

When I apply a padding-left style definition for a code tag as like the following:

<!DOCTYPE html>
<html>
<head>
<style>
  code {
    font-size: 20px;
    padding-left: 10px;
  }
</style>
</head>
<body>
<code>git pull origin master<br />
git push origin master
</code>
</body>
</html>

The result was like below. That is, the padding-left style was applied for the first line only.

Is this behavior as HTML5/CSS specification? To apply the padding for all lines, should NOT I use the padding-left?

Answer 1

<code>是inline element，因此您需要将其更改为display:block/inline-block以实现

＆＃13;

code {
  display: inline-block;
  font-size: 20px;
  padding-left: 10px;
}

＆＃13;

<code>git pull origin master<br />
git push origin master
</code>

＆＃13;

Answer 2

将此添加到您的风格中。

display：block;

Answer 3

<code>是一个内联元素，因此填充不会按预期应用于您的代码，因为代码中的<br>元素只是打破了行而不是真正启动新行。

解决此问题的一种方法是将display: block;应用于<code>元素，但看起来理想的解决方案是使用<pre>元素，因为您想要做一个多行代码块。

<pre>
  git pull origin master
  git push origin master
</pre>

如果您有任何其他问题，请与我们联系。希望这有帮助！

CSS填充左侧<code> is applied for only the first line

3 个答案: