Test for opx padding issue in a div.
Note in the box1 div above how the text is directly next to the left side but there is spacing top and bottom of the letters in the div and the image has the same issue.
You can remove the paragraph tag or try other fonts but the issue remains.
Question: How to fix?
Thanks to "pandy" for the suggestions on how to fix.
Answer: It needed line-height for the text and display: block for the image.
Plus it looks like there is a minimum for top and bottom margin by default due to the way the font is shaped.
The type of font will display the spacing more then others.
If I use line-height in a div I can get the text to the top but the bottom will fall below the div border.
I added height: 3.3vh; in box1 div to show it can be done, there is still a slight gap at the top & bottom or it still falls below the line depending on you using Firefox (in between border) or Chrome (gap at bottom) or Vivaldi (drops below) web browsers.... Also when you zoom in the div box will remain the same height and the text will become hidden so I removed the height: 3.3vh altogether.
If I remove line-height: 1.5em; then the text goes back inside the div container.
This is just an example and would not matter in 99.9% of you typing in a div with a colored background as you would normally have padding.
I normally use 1.3em for line-height
