white-space: pre not working as expected

Instead of white-space: pre use white-space: pre-line.

From MDN:

The white-space property

The 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.

Tags:

Html

Css