Div has extra unwanted space on top inside pre
I can't figure out why there is empty space at the top. I haven't applied any styles to it
<pre>
<div class="codeBlock">
<ol>
<li>(function() {</li>
<li>function $codeBlock() {</li>
<li>return {};</li>
</li>}</li>
</ol>
</div>
</pre>
source to share
pre
has a white-space: pre
default style . From W3Schrools about white-space: pre
:
The space is saved by the browser. The text will only wrap on line breaks. Acts like a tag
<pre>
in HTML
Of course, you can move content pre
in one line, but not sure if this will be flexible or convenient.
So, you can change the CSS property white-space
to normal
or nowrap
(depending on the need for wrapping):
pre {
white-space: nowrap;
}
.codeBlock ol, li {
margin: 0;
}
<pre>
<div class="codeBlock">
<ol>
<li>(function() {</li>
<li>function $codeBlock() {</li>
<li>return {};</li>
</li>}</li>
</ol>
</div>
</pre>
If you want to revert the behavior white-space
for ol
, you can also set
.codeBlock ol { white-space: pre }
source to share
Okay, so that's it. pre takes each character and interprets it in the display, which means it will "show" a carriage return. Try removing spaces. Let's say you twig use {% spaceless%}. If you are using something else, use the correct function, but if you do it manually, do as I did in the following example :) Cheers
<pre><div class="codeBlock"><ol><li>(function() {</li><li>function $codeBlock() {</li><li>return {};</li><li>}</li></ol></div></pre>
source to share