white-space: pre not working as expected
Instead of white-space: pre
use white-space: pre-line
.
From MDN:
The
white-space
propertyThe
white-space
property is used to describe how whitespace inside the element is handled.normal Sequences of whitespace are collapsed. Newline characters in the source are handled as other whitespace. Breaks lines as necessary to fill line boxes.
nowrap Collapses whitespace as for
normal
, but suppresses line breaks (text wrapping) within text.pre Sequences of whitespace are preserved. Lines are only broken at newline characters in the source and at
<br>
elements.pre-wrap Sequences of whitespace are preserved. Lines are broken at newline characters, at
<br>
, and as necessary to fill line boxes.pre-line Sequences of whitespace are collapsed. Lines are broken at newline characters, at
<br>
, and as necessary to fill line boxes.
Also, the padding-top
issue you mention isn't really padding. In looking at your code there appears to be at least one line break at the start of the line.