<pre> тег добавляет разрыв над собой? - PullRequest
Новая
       3

<pre> тег добавляет разрыв над собой?

16 голосов
/ 22 февраля 2012

У меня есть следующий HTML: 

<h2>Embed Code</h2>
<pre>
  <code>
&lt;script type=&quot;text/javascript&quot;&gt;
  var something = 'else';
&lt;/script&gt;

И следующий CSS: 

h2 {
  background:#1e7ca2;
  font-weight: 100;
  font-size: 1.25em;
  padding: 10px 15px;
  margin: 0;
  color: white;
}
pre {
  margin:0;
  padding:0;
}
code {
  margin: 0;
  padding: 0 30px;
  display: block;
  background: #1d1f20;
  color: #839496;
  font-size: .85em;
  line-height: 1.6em;
}

Но есть промежуток между h2 и pre элементом, от которого я не могу избавиться.

Вы можете увидеть проблему в действии здесь: http://jsfiddle.net/gaby/k5V8U/

Ответы [ 4 ]

34 голосов
/ 22 февраля 2012

Все, что находится внутри <pre>, также сохраняет пробелы ..

Если вы удалите пробел между <pre> и <code>, как это 

<pre><code>

и

это исправлено ..

Демо на http://jsfiddle.net/gaby/k5V8U/1/

5 голосов
/ 22 февраля 2012

Это связано с тем, что <pre> сохраняет пробелы.У вас есть пустые разрывы строк как в начале, так и в конце вашего тега <pre>.Измените его следующим образом: 

<h2>Embed Code</h2>
<pre><code>
&lt;script type=&quot;text/javascript&quot;&gt;
  var something = 'else';
&lt;/script&gt;

Вам также может понадобиться удалить разрывы строк в начале и конце тега <code>: 

<h2>Embed Code</h2>
<pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
  var something = 'else';
&lt;/script&gt;

Надеюсь, это поможет!

2 голосов
/ 22 февраля 2012

Вы сами создали этот пробел.Указанный вами background-color является свойством <code>.Используя символы новой строки внутри элемента <pre>, вы фактически создаете новую строку, так как <pre> сохраняет пробелы.Вы можете использовать 

<h2>Embed Code</h2>
<pre><code>
&lt;script type=&quot;text/javascript&quot;&gt;
  var something = 'else';
&lt;/script&gt;

Если вы хотите оставить «поле», но заполните его цветом <code>, используйте 

<h2>Embed Code</h2>
<pre><code>
&lt;script type=&quot;text/javascript&quot;&gt;
  var something = 'else';
&lt;/script&gt;
0 голосов
/ 11 апреля 2014

Как уже упоминали другие, вам нужно поместить элемент <code> в ту же строку, что и содержимое внутри него, потому что <pre> считает его началом содержимого.Существует также простое решение на основе JavaScript, которое я разместил в этом ответе: https://stackoverflow.com/a/23001060/207661 и решение на основе отрицательной маржи, которое также находится в той же теме.

...