Unknown paragraph's bottom margin when I custom css

[HxxWorkAccount]

In the beginning, I wanted to use plantuml, which is a very powerful tool. But I found that if the plantuml is too big, it will break the right side border and make the preview scroll horizontally.

So I checked the html code and found that the svg generated by plantuml is placed directly under <p>. Then I wrote this code in the custom css:

p {
  margin: 16px 0px 0px 0px !important;
  padding: 0 0 0 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
}
p::-webkit-scrollbar {
  height: 0;
  width: 0;
}

This code works perfectly in Chrome and Safari, but in Preview it cause unknown bottom margin under the paragraph element.

example:

Before adding css code:

After adding css code:

Obviously this is not a very important issue and the author may not have time to fix it, but I'd still like to know if there is an easy fix. Or maybe some other ways to help overflow svg scroll inside <p> which will prevent preview from appearing scrollbar. ₍ᐢ •͈ ༝ •͈ ᐢ₎♡

BTW, check out my custom style full text here.