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.

b1mind•8/27/23, 11:01 PM

https://youtu.be/plOl7TNc89A?si=CeP5UNL4JchGPimg

YouTubeKevin Powell

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•8/27/23, 11:01 PM

snxxwyy•8/27/23, 11:02 PM

if you want the image to take up the full height of the screen use or if you want to get rid of the small gap underneath images, use as mentioned above by b1

b1mind•8/27/23, 11:04 PM

Also know the downsides of vh/vw units

b1mind•8/27/23, 11:04 PM

https://youtu.be/veEqYQlfNx8?si=DCrTxOXS3atRA3IY

YouTubeKevin Powell

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•8/27/23, 11:04 PM

good ol 100% trick html/body down is still my goto till svh/lvh are around longer.

Bb1mind good ol 100% trick html/body down is still my goto till svh/lvh are around longe...

snxxwyy•8/27/23, 11:07 PM

wouldn't it be for the body for it to change dynamically?

b1mind•8/27/23, 11:10 PM

sure but you need to pass down height: 100% from html

b1mind•8/27/23, 11:10 PM

also body would have to be grid/flex to use min

snxxwyy•8/27/23, 11:13 PM

oh yeah true

snxxwyy•8/27/23, 11:13 PM

i never got setting the 100% on the html element, could you explain that please? i thought it was just body

Ssnxxwyy if you want the image to take up the full height of the screen use `img { height...

MoniOP•8/27/23, 11:18 PM

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•8/27/23, 11:21 PM

I think you're trying to set a

background-image

background-image

that takes up the entire viewport?

snxxwyy•8/27/23, 11:21 PM

that's what i was thinking whilst looking at it too

ZZakum I think you're trying to set a `background-image` that takes up the entire viewp...

MoniOP•8/27/23, 11:21 PM

yes

snxxwyy•8/27/23, 11:21 PM

you'll have to set the div that has that with a

Zakum•8/27/23, 11:21 PM

I personally use

<img>

<img>

with because of some limitations with background-image

snxxwyy•8/27/23, 11:23 PM

then your image stays in the same place even if the page is scrolled does it not?

MoniOP•8/27/23, 11:24 PM

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

Ssnxxwyy then your image stays in the same place even if the page is scrolled does it not...

Zakum•8/27/23, 11:31 PM

ah yeah I mean sometimes that's a useful effect, otherwise

MMoni the image has height of 100vh now its working fine but there is still the white ...

Zakum•8/27/23, 11:33 PM

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

Zakum•8/27/23, 11:33 PM

in other words it is "removed from the flow of the document"

Zakum•8/27/23, 11:33 PM

it will not affect other elements' placement