Как мне добавить отступы по всем строкам? Он отображается только в первой строке.

enter image description here

Вот мой код:

code {
  color: black;
  background-color: darken($background-color, 5%);
  border-radius: 4px;
  overflow: auto;
  padding-left: 5px;
}
-1
aakhilv 31 Авг 2020 в 23:24

2 ответа

Лучший ответ

Хорошо, допустим, что у вас есть следующий код, вы заметите, что в результате нет лишнего места, как вы хотели.

И я действительно заметил, что отступы имеют значение, посмотрите фрагмент ниже, чтобы увидеть, как я написал его в своем редакторе.

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>

И проверьте это с некоторым отступом. Результат изменится и добавятся две новые строки. Один вверху и один внизу.

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>

Две новые строки называются textNode, они добавляются браузером, поскольку в строке есть место. И каждое добавляемое вами пространство называется textNode

Я не совсем понимаю процесс, лежащий в основе этого, но я думаю, что это причина того, что у вас есть дополнительные строки или отступы, которые вы даже не добавляли.

И вот так это выглядит в браузере

result3

И вот результат после удаления лишнего интервала.

result4


< Сильный > Edit


На основании вашего запроса. Вот как выглядит код в моем редакторе

result5

А вот как это выглядит в браузере

result

Чтобы добавить отступы со всех сторон, как я понял из вашего кода, все, что вам нужно сделать, это добавить следующее.

/* 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; вот как это выглядит в моем редакторе.

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>

Итак, заполнение работает должным образом. Убедитесь, что вы заключили code в pre, чтобы он работал правильно.

Если это не то, о чем вы просите, пожалуйста, дайте мне знать еще раз. Я сделаю все возможное, чтобы помочь тебе.

2
Ahmad Dalao 1 Сен 2020 в 16:50

Скорее всего, в коде есть отступ для текста в блоках кода. Не могли бы вы сделать это заполнение 0? Я бы опубликовал код для него, чтобы было больше шансов найти проблему.

-1
Zero Cool 31 Авг 2020 в 21:04