remove gap from image inside div element [duplicate] - html

Question

This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 2 years ago.
I'm working on a front end project where I have created an "About us" section with some text and an image .
As you can see there is a small white gap under my image that I am trying to remove . I try adjusting margin , padding , height of the div element and the image but I am definitely missing something
My code :
#about-container{
width:100%;
height:auto;
background-color: white;
position: relative;
margin:0;
display:flex;
}
#about-container div{
margin:0;
padding:0;
height:auto;
}
#desc{
width:30%;
background-color:green;
}
#desc ul{
list-style-type: none;
margin:0;
padding:0;
}
#desc li{
padding:10px;
}
#about-img{
width:70%;
}
#about-img img{
width:100%;
height:500px;
}
<div id="about-container">
<div id="desc">
<h1> Our values </h1>
<ul>
<li>We care about our customer needs </li>
<li>We focus on the quality of our products & services offered </li>
<li>We invest in innovation and sustainable development </li>
<li>We care about the needs of society and vulnerable social groups</li>
</ul>
</div>
<div id="about-img">
<img src="IMAGES/about-img.jpg">
</div>
</div>
I would appreciate your help with this small task .

Answer 1

You can align them by using this CSS code:
#about-img img {
width: 100%;
height: 500px;
vertical-align: bottom;
}

Answer 2

Add vertical-align: top; to the image. Or simply add diaplay: block to the image
#about-container{
width:100%;
height:auto;
background-color: white;
position: relative;
margin:0;
display:flex;
}
#about-container div{
margin:0;
padding:0;
height:auto;
}
#desc{
width:30%;
background-color:green;
}
#desc ul{
list-style-type: none;
margin:0;
padding:0;
}
#desc li{
padding:10px;
}
#about-img{
width:70%;
}
#about-img img{
width:100%;
height:500px;
vertical-align: top;
}
<div id="about-container">
<div id="desc">
<h1> Our values </h1>
<ul>
<li>We care about our customer needs </li>
<li>We focus on the quality of our products & services offered </li>
<li>We invest in innovation and sustainable development </li>
<li>We care about the needs of society and vulnerable social groups</li>
</ul>
</div>
<div id="about-img">
<img src="https://www.w3schools.com/bootstrap/sanfran.jpg">
</div>
</div>

Answer 3

SOLUTION :
#about-container div{
margin:0;
padding:0;
height: 500px;
}
#about-img img{
width:100%;
height:100%;
}