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

问题描述

如何在所有行之间添加填充？它仅显示在第一行。

这是我的代码：

fun dummy() {
    val java = android.database.Cursor::class.java
}

解决方法

好吧，假设您有以下代码，您会发现结果中没有多余的空间。

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

  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>

接着，填充工作按预期进行，请确保将code用pre包装，以使其正常工作。

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

,

最有可能在代码块中为代码块中的文本填充。您可以尝试将该填充设为0吗？我也会为其发布代码，以便有更大的机会发现问题。