There is a weird space underneath my image. I just want a small space but however i change it, it's still as big or bigger which is extremely annoying. What is the problem?
I tried adding display: block to img {} but the space got bigger.
<!DOCTYPE html>
<html>
<head>
<title>Main Page of Canada</title>
<style>
/* CSS code for fading image */
.image-container {
display: block;
justify-content: center;
align-items: center;
height: 100vh; /*<-- Remove */
overflow: hidden;
position: relative;
}
img {
display: inline-block;
max-width: 100%;
max-height: 100%;
opacity: 1;
transition: opacity 0.5s;
}
img.fade-out {
opacity: 0;
}
/* CSS code for navigation bar */
nav {
background: #333;
height: 50px;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
color: #fff;
text-decoration: none;
padding: 15px 20px;
}
/* CSS code for sections */
section {
padding: 50px;
margin: 0;
}
/* CSS code for main page section */
#main-page {
margin-top: 0;
}
/* Responsive Styles */
@media screen and (max-width: 768px) {
section {
padding: 30px;
}
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// JavaScript code for fading image on scroll
$(document).ready(function() {
var scrollTimeout;
$(window).scroll(function() {
clearTimeout(scrollTimeout);
if ($(window).scrollTop() < $(window).height() - 50) {
$('img').addClass('fade-in').removeClass('fade-out');
} else {
scrollTimeout = setTimeout(function() {
$('img').addClass('fade-out').removeClass('fade-in');
}, 250);
}
});
});
</script>
</head>
<body>
<div class="image-container">
<img src="(image)" alt="Canada Header Image">
</div>
</body>
</html>
Here is my code. I'm not sure what the problem is, so if someone could help me, I would be extremely grateful. I don't really see a problem with my code because I tried every singe solution that could exist and this is extremely annoying. I need to get this done in a few weeks.
The problem isn't the image, the problem is the div with the .image-container
class surrounding the image.
You set it with height: 100vh;
, which will make it as big as the height of the screen
Just remove that line from the CSS, and the space will go away.