Search code examples
htmlcssjekyllpaddingblogs

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

How would I add the padding across all the lines? It only shows up on the first line.

enter image description here

Here's my code:

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

  • 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.

    result

      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.

    result2

     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

    result3

    and here is the result after removing the extra spacing.

    result4

    Edit

    Based upon your request. Here is how the code looks in my editor

    result5

    and here is how it looks in the browser

    result

    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.

    result7

    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.