/    Sign up×
Community /Pin to ProfileBookmark

This should be so simple – padding or margin issue

Copy linkTweet thisAlerts:
Mar 15.2022

Here’s my codepen, when I try create a link I’m getting extra space under my image hyperlink.

Why? all padding / margins have been removed

https://codepen.io/kodee/pen/OJzVdjG

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumMar 15.2022 — The reason is that the default value for vertical-align is baseline. Set it to top instead and everything will be fine:
``<i>
</i> div a img{
height: 50px;
object-fit: cover;
vertical-align: top;
}<i>
</i>``
https://developer.mozilla.org/en-US/docs/Glossary/baseline
Copy linkTweet thisAlerts:
@NogDogMar 16.2022 — Heh...I just tried vertical-align: bottom; which seemed to do the trick, too. Guess the main thing is to get it off the baseline?
Copy linkTweet thisAlerts:
@kiwisauthorMar 16.2022 — I actually found this article, tried this and it worked

I've updated my pen

https://www.tutorialrepublic.com/faq/how-to-remove-white-space-under-an-image-using-css.php#:~:text=Answer%3A%20Use%20the%20CSS%20display,to%20adjust%20other%20inline%20elements.
Copy linkTweet thisAlerts:
@SempervivumMar 16.2022 — @NogDog#1643191

Yes, aligning to the bottom will have the same result.
×

Success!

Help @kiwis spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.26,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...