如何在所有行中添加 5px 填充？

Question

如何在所有行中添加填充？它只显示在第一行。

这是我的代码：

code {
  color: black;
  background-color: darken($background-color, 5%);
  border-radius: 4px;
  overflow: auto;
  padding-left: 5px;
}

Answer 1

好的，假设您有以下代码，您会注意到结果中没有您想要的额外空间。

实际上我注意到缩进很重要，请查看下面的 sn-p，看看我是如何在编辑器中编写它的。

  pre code {
        background-color: #eee;
        border: 1px solid #999;
        display: block;
    }

<pre><code>pre code {
        background-color: #eee;
        border: 1px solid #999;
        display: block;
        padding: 20px;
}
</code></pre>

并通过一些缩进检查这一点。结果将发生变化，将添加两条新行。一个在顶部，一个在底部。

 pre code {
        background-color: #eee;
        border: 1px solid #999;
        display: block;
        /* padding: 20px; */
    }

<pre><code>
        pre code {
        background-color: #eee;
        border: 1px solid #999;
        display: block;
        padding: 20px;
}
       </code></pre>

这两行被称为textNode，它们是由浏览器添加的，因为行中有空格。你添加的每个空格都称为textNode

我不完全理解它背后的过程，但我认为这就是你有一些你甚至没有添加的额外行或填充的原因。

这就是它在浏览器上的样子

这是去掉多余间距后的结果。

---

编辑

---

根据您的要求。 这是代码在我的编辑器中的样子

这是它在浏览器中的外观

按照我从您的代码中了解到的那样，要从各个方面添加填充，您需要做的就是添加以下内容。

/* CSS */
pre code {
  border-radius: 4px;
  overflow: auto;
  padding: 15px;
  color: black;
  background-color: #eee;
  border: 1px solid #999;
  display: block;
}

<!-- HTML -->
<pre class="myPre">
<code class="myCode">pre code { 
background-color: #eee;
border: 1px solid #999;
display: block;
padding: 20px;
}</code></pre>

避免所有这些麻烦的另一种方法是使用white-space: pre-line;，这是它在我的编辑器上的外观。

pre code {
  border-radius: 4px;
  overflow: auto;
  padding: 15px;
  color: black;
  background-color: #eee;
  border: 1px solid #999;
  display: block;
  white-space: pre-line;
}

<pre class="myPre">
    <code class="myCode">code {
        background-color: #eee; 
        border: 1px solid #999;
        display: block;
        padding: 20px;
            }
</code></pre>

然后，填充按预期工作，确保您使用pre 包裹code 以使其正常工作。

如果这不是您要求的，请再次告诉我。我会尽力帮助你的。

Answer 2

代码块中的文本很可能在代码中存在填充。您可以尝试将填充设置为 0 吗？我也会发布它的代码，以便更好地找到问题。