Html Question posted in
Some basic documentation can be found here.

Html – UnKnown height is being applied to pre tag

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

enter image description here

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…

dsabyte

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!

Tags:

2

Answers


  1. 0

    you can set height: fit-content; to pre tags in CSS.

    Login or Signup to reply.
  2. 0

    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

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

    Post adding display: flex css this is the result

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search