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

Question

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

这是我的代码：

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

Answer 1

代码块中的文本很可能在代码中有填充。你能试着把填充设为 0 吗？我也会 post 它的代码，以便更好地找到问题。

Answer 2

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

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

  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 它们是由浏览器添加的，因为该行中有 space。您添加的每个 space 称为 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 以使其正常工作。

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

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

How would I add the 5px padding across all the lines?

html

css

blogs

padding

jekyll

编辑