Cannot remove padding in a div Options

[David Webdesign]

Basic newbie problem..... : )

I still see padding above and below the text in a div. I am using Georgia and Open Sans fonts.
The text is directly next to the left side but has padding above and below.
Same issue with an image.

I have added:
margin: 0px;
padding: 0px;

See a test. Right click on the page to view source: http://davidswebsite.com/test/test_0px_padding_in_div.html

How to fix?

This post has been edited by David Webdesign: Oct 20 2022, 03:30 AM

[pandy]

It isn't padding. It's about line height. Images are inline elements and stand on the baseline, just like letters. Space is reserved below the line for descenders, like in y or j. Easiest is to make the image display: block.

Not sure why there is space on top of text. Yes, there would be space, even if you removed the H1 and typed the text directly in the DIV. But probably it's so lines won't run together. Would look odd of there were no space between lines, yes? I'd simply reduce line-height for the H1. I'm guessing about 0.9em should do it.

Kudos for creating such a nice test case. Makes things so much easier and clearer.

[David Webdesign]

Thanks. It was line-height for the text and display: block for the image that was needed : )
See the link for more explanation.

It isn't padding. It's about line height. Images are inline elements and stand on the baseline, just like letters. Space is reserved below the line for descenders, like in y or j. Easiest is to make the image display: block.

Not sure why there is space on top of text. Yes, there would be space, even if you removed the H1 and typed the text directly in the DIV. But probably it's so lines won't run together. Would look odd of there were no space between lines, yes? I'd simply reduce line-height for the H1. I'm guessing about 0.9em should do it.

Kudos for creating such a nice test case. Makes things so much easier and clearer.