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
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...
img { display: block;} ?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 b1Also know the downsides of vh/vw units
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...
good ol 100% trick html/body down is still my goto till svh/lvh are around longer.
wouldn't it be
min-height: 100% for the body for it to change dynamically?sure but you need to pass down height: 100% from html
also body would have to be grid/flex to use min
oh yeah true
i never got setting the 100% on the html element, could you explain that please? i thought it was just body
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
I think you're trying to set a
background-image that takes up the entire viewport?that's what i was thinking whilst looking at it too
yes
you'll have to set the div that has that with a
height of 100vhI personally use
<img> with position: fixed because of some limitations with background-imagethen your image stays in the same place even if the page is scrolled does it not?
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
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