White space after image

I have a image in my website "https://talhamustafa1.github.io/mv.machine-learning/" after the image there is a white space i have tried to inscept it and remove the white space below but could not find anything.I want my image to take 100vh of the screen and there should be no white space below.
18 Replies
b1mind
b1mind15mo ago
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...
b1mind
b1mind15mo ago
img { display: block;} ?
snxxwyy
snxxwyy15mo ago
if you want the image to take up the full height of the screen use img { height: 100vh; } or if you want to get rid of the small gap underneath images, use img { display: block; } as mentioned above by b1
b1mind
b1mind15mo ago
Also know the downsides of vh/vw units
b1mind
b1mind15mo ago
Kevin Powell
YouTube
The problems with viewport units
Conquering Responsive Layouts (free course): https://courses.kevinpowell.co/conquering-responsive-layouts Join the Discord: https://kevinpowell.co/discord Viewport units often feel like this cheat code that makes things so much easier when you first discover them, but they actually are problematic for a number of reasons, from creating horizon...
b1mind
b1mind15mo ago
good ol 100% trick html/body down is still my goto till svh/lvh are around longer.
snxxwyy
snxxwyy15mo ago
wouldn't it be min-height: 100% for the body for it to change dynamically?
b1mind
b1mind15mo ago
sure but you need to pass down height: 100% from html also body would have to be grid/flex to use min
snxxwyy
snxxwyy15mo ago
oh yeah true i never got setting the 100% on the html element, could you explain that please? i thought it was just body
Moni
Moni15mo ago
in my website the white space is not because of img there is a lot of white space i think there is another issues i have using the solution kevin have told but it did not make difference
Zakum
Zakum15mo ago
I think you're trying to set a background-image that takes up the entire viewport?
snxxwyy
snxxwyy15mo ago
that's what i was thinking whilst looking at it too
Moni
Moni15mo ago
yes
snxxwyy
snxxwyy15mo ago
you'll have to set the div that has that with a height of 100vh
Zakum
Zakum15mo ago
I personally use <img> with position: fixed because of some limitations with background-image
snxxwyy
snxxwyy15mo ago
then your image stays in the same place even if the page is scrolled does it not?
Moni
Moni15mo ago
the image has height of 100vh now its working fine but there is still the white space on scrolling down i still have white space
Zakum
Zakum15mo ago
ah yeah I mean sometimes that's a useful effect, otherwise position: absolute you need more height on the body, the image is position: absolute so it will not affect the body even if you increase its height in other words it is "removed from the flow of the document" it will not affect other elements' placement
Want results from more Discord servers?
Add your server