Ответ 1
То, что когда-либо находится внутри <pre>
, также сохраняет пробелы.
Если вы удалите пробел между <pre>
и <code>
, как этот
<pre><code>
и
</code></pre>
он исправляется..
У меня есть следующий 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/
То, что когда-либо находится внутри <pre>
, также сохраняет пробелы.
Если вы удалите пробел между <pre>
и <code>
, как этот
<pre><code>
и
</code></pre>
он исправляется..
Это связано с тем, что <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>
Надеюсь, что это поможет!
Вы сами создали этот пробел. Указанный 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>
Как уже упоминалось, вам нужно поместить элемент <code>
на ту же строку, что и содержимое внутри него, потому что <pre>
считают его началом содержимого. Существует также простое решение на основе JavaScript, которое я опубликовал в этом ответе: fooobar.com/info/346331/... и решение с отрицательной маркой, которое также находится в одном потоке.