Cannot remove padding in a div |
Cannot remove padding in a div |
David Webdesign |
Oct 20 2022, 03:07 AM
Post
#1
|
Group: Members Posts: 6 Joined: 20-October 22 Member No.: 28,600 |
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 |
Oct 20 2022, 04:22 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,734 Joined: 9-August 06 Member No.: 6 |
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 |
Oct 20 2022, 03:05 PM
Post
#3
|
Group: Members Posts: 6 Joined: 20-October 22 Member No.: 28,600 |
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. |
Lo-Fi Version | Time is now: 28th May 2024 - 08:21 AM |