时间戳

首页 > 解决方案 > 从 div 元素内的图像中删除间隙

html - 从 div 元素内的图像中删除间隙

问题描述

我正在做一个前端项目，在那里我创建了一个带有一些文本和图像的“关于我们”部分。 在此处输入图像描述

如您所见，我正在尝试删除图像下方的白色小间隙。我尝试调整div 元素和图像的margin, padding,height但我肯定遗漏了一些东西

我的代码：

#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>

感谢您对这项小任务的帮助。

标签： htmlcss

解决方案

添加vertical-align: top;到图像。或者只是添加diaplay: block到图像

#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>

推荐阅读