White line between my hero and main sections

Hi all, trying to build a website for my sister's business. Just making a couple prototypes for the moment, and on this one I have a white line between the hero and main sections. It's a piece of body. ( I tried setting the body background color to red and the line becomes red). Anyone have an idea what causes this? heres my codePen: https://codepen.io/berdj/pen/OJqvyZw (just changed the image and took one from the internet instead of a local file for better visibility, but the issue remains the same)
3 Replies
MarkBoots
MarkBoots•10mo ago
#hero-img{ display: block }
#hero-img{ display: block }
by default an image has a display of type inline. this to have it align better with inline text. the result is a bit of white space (the descender space). Making it a display: block removes that space
_bidji
_bidji•10mo ago
could you explain? 🙂 Okay, thank you! have a great day 😄
clevermissfox
clevermissfox•10mo ago
KPow explains better than I can https://youtu.be/plOl7TNc89A?si=wsiLRba-R_gwBAot
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...
Want results from more Discord servers?
Add your server