<pre class="prettyprint-override"> tag adds gap above itself?

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

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

И следующий 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/

Ответы

Ответ 1

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

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

<pre><code>

и

</code></pre>

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

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

Ответ 2

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

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

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

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

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

Ответ 3

Вы сами создали этот пробел. Указанный 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></pre>

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

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

Ответ 4

Как уже упоминалось, вам нужно поместить элемент <code> на ту же строку, что и содержимое внутри него, потому что <pre> считают его началом содержимого. Существует также простое решение на основе JavaScript, которое я опубликовал в этом ответе: fooobar.com/info/346331/... и решение с отрицательной маркой, которое также находится в одном потоке.