UnKnown height is being applied to pre tag

Issue

I have a set of pre-tags on a webpage. These pre-tags have a 60px height by default which I am not able to figure out where they are comings from.

Here is the page that is having the issue -> https://dsabyte.com/blog/engineering/programming/java-script/Sleep-Function-In-JavaScript--AsyncSync-47b91c1e-8d39-4993-bd7a-a2d12ae11a3e#gRNOP0dVww

I deleted every child element of the pre tag, but still pre tag has a 60px height. Then after I removed the class name and inline styles to see the effect still pre tag still had a 60px height. Below is the screenshot for the same...

I also tried looking at the classes and CSS on the right side, but couldn’t find anything which could cause this issue.

Can someone help me here?

Thanks in advance!

Edit

Here is the inline CSS being applied on pre tag

padding: 10px; background-color: #232428; color: white; overflow: scroll;

Solution

Pre tag renders white spaces as well, you can use css property whitespace to make sure that whitespaces are trimmed while representation.

1. For example giving whitespace: pre-line to pre tag in your case removes the extra spacing from top and bottom of your code block.

Post adding this css this is the result

2. Or you can just give display: flex to pre tag

Post adding display: flex css this is the result

Answered By - Siddhant