Ответ 1
То, что когда-либо находится внутри <pre>, также сохраняет пробелы.
Если вы удалите пробел между <pre> и <code>, как этот
<pre><code>
и
</code></pre>
он исправляется..
<pre class="prettyprint-override"> tag adds gap above itself?
У меня есть следующий HTML:
<h2>Embed Code</h2>
<pre>
<code>
<script type="text/javascript">
var something = 'else';
</script>
</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/
Ответы
Ответ 2
Это связано с тем, что <pre> сохраняет пробел. У вас есть пустые разрывы строк как в начале, так и в конце тэга <pre>. Измените его на следующее:
<h2>Embed Code</h2>
<pre><code>
<script type="text/javascript">
var something = 'else';
</script>
</code></pre>
Вам также может потребоваться удалить разрывы строк в начале и конце тега <code>:
<h2>Embed Code</h2>
<pre><code><script type="text/javascript">
var something = 'else';
</script></code></pre>
Надеюсь, что это поможет!
Ответ 3
Вы сами создали этот пробел. Указанный background-color является свойством <code>. Используя новые строки внутри вашего элемента <pre>, вы фактически создаете новую строку, поскольку <pre> сохраняет пробел. Вы можете использовать
<h2>Embed Code</h2>
<pre><code>
<script type="text/javascript">
var something = 'else';
</script></code></pre>
Если вы хотите сохранить "margin", но заполните его цветом <code>, используйте
<h2>Embed Code</h2>
<pre><code>
<script type="text/javascript">
var something = 'else';
</script>
</code></pre>
Ответ 4
Как уже упоминалось, вам нужно поместить элемент <code> на ту же строку, что и содержимое внутри него, потому что <pre> считают его началом содержимого. Существует также простое решение на основе JavaScript, которое я опубликовал в этом ответе: fooobar.com/info/346331/... и решение с отрицательной маркой, которое также находится в одном потоке.