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

Question

How would I add the padding across all the lines? It only shows up on the first line.
Here's my code:
code {
color: black;
background-color: darken($background-color, 5%);
border-radius: 4px;
overflow: auto;
padding-left: 5px;
}

Answer 1

Ok, let's say that you have the following code, you will notice that there is no extra space as you wanted in the result.
And I actually noticed that indentation matters check out the snippet below, to see how I wrote it in my editor.
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>
And check this out with some indentation. The result is going to change and two new lines are to be added. One at the top and one at the bottom.
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>
The two new lines are called textNode they are added by the browser since there is space in the line. And every space you add is called textNode
I don't understand the process behind it completely but I think it is the reason you are having some extra lines or paddings you didn't even add.
And that's how it looks on the browser
and here is the result after removing the extra spacing.
Edit
Based upon your request.
Here is how the code looks in my editor
and here is how it looks in the browser
To add padding from all sides as I understood from your code all you need to do is to add the following.
/* 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>
Another way to avoid all of this hassle is to use white-space: pre-line; here is how it looks on my editor.
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>
And there you go, the padding is working as expected make sure you are wrapping the code with a pre in order to get it to work correctly.
If that wasn't what you request do please let me know again. I will do my best to help you out.

Answer 2

There is most likely padding in the code for the text in the code blocks. Could you try making that padding 0? I would post the code for it as well for a better chance of finding the issue.