remove gap from image inside div element

Question

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 .

score 0 · Answer 1 · answered Aug 27 '20 at 10:22

0

You can align them by using this CSS code:

#about-img img {
  width: 100%;
  height: 500px;
  vertical-align: bottom;
}

answered Aug 27 '20 at 10:22

Manuel Cheța

480
2
10

score 0 · Answer 2 · answered Aug 27 '20 at 10:24

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>

score -1 · Answer 3 · answered Aug 27 '20 at 10:21

-1

SOLUTION :

#about-container div{
    margin:0;
    padding:0;
    height: 500px;
}


#about-img img{
    width:100%;
    height:100%;
}

answered Aug 27 '20 at 10:21

VASILEIOS SKENTOS

83
1
9

this will not remove the space but will make it overflow outside the div – Temani Afif Aug 27 '20 at 10:25
@TemaniAfif It didn't in my case – VASILEIOS SKENTOS Aug 27 '20 at 10:28
add overflow:auto to #about-container div and you will get a scroll – Temani Afif Aug 27 '20 at 10:29

remove gap from image inside div element

3 Answers3