Hero Img spacing
I have this hero img and can't figure out why there's that space (made aqua for easy spotting). All my headers have a margin:0 and I've tried playing with padding as well.
Maybe I'm missing something with the hero image
HTML
<section class="hero">
<div class="hero-image">
<img src="le_hero_black.jpg" alt="">
</div>
<div class="hero_text-overlay container">
<h4>TEST TEST</h4>
<h1 class="hero_large-text">Le's Nails</h1>
</div>
</section>
CSS
.hero-image {
background: url('hero-image.jpg');
}
9 Replies
kinda one those funky things where because its inline element.
img { display: block;} would remove it
you could target it more specific if you wanted too .hero-image > img {}, if you didn't want all your images to be effectedOMG, thank you! I can't believe I've been staring at my screen for hoursss trying to figure it out. I can now go eat dinner in peace.
Also just fyi read #how-to-ask-good-questions for tips on code formatting and sharing stuff (codepen or bust1) and just incase you didn't see them with your role you have access to the course chat too #General Chat - CRL
Oh okay! Thanks for the info! I'll be sure to do that next time. Much appreciated!
np enjoy dinner! I need to eat too* 😂
This has been bugging me too for a long time.
The default inline behavior makes sense, you don't want your image to sit on the red line.
Kevin Powell
YouTube
Get rid of that small space under your images
Interested in CSS Demystified? Sign up for the waiting list here: https://cssdemystified.com
That annoying space under your images is a leftover from the old days of the web, and it can drive you nuts! Luckily, it's really, really easy to fix!
It can be frustrating when little things like this happen. That space under the images is there for...
Thanks so much for sharing the video and glad I'm not alone ha! I googled and googled but nothing addressed it. I really should have known better that Kevin would have the answer. It does make a lot of sense now but man, it drove me nuts ðŸ˜
Kevin does a great job explaining these issues thoroughly. I'm thrilled you've resolved it now