In this screenshot of Mozilla learning web CSS section at the middle of page it writes about CSS padding of inline element like span, my problem and question are why the vertical padding of the span box cause overlap on the above text but is transparent on the below text.
This is a screenshot of my issue:
It is answered in a comment by @Alohci
Line by line drawing by graphic engine cause the previous line to be under the padding and next line be on the padding. I think it is an issue in implementation!