如何消除浮动div底部的额外padding？已尝试常规方法无效

这种底部的额外空白大概率是图片的行内元素特性搞的鬼——图片默认是inline-block，会和文本基线对齐，底部会留出一小段空间（大概是字体下行部分的高度）。你试过的inline-block没解决问题，应该是没针对图片本身调整。给你几个靠谱的解决方法：

• 直接把图片改成块级元素，彻底消除基线对齐的影响：

  .float-div img {
    display: block;
  }
  

• 强制图片和容器底部对齐，跳过基线规则：

  .float-div img {
    vertical-align: bottom;
    /* 也可以用 middle / top，效果类似 */
  }
  

• 如果是overlay层引发的问题，检查定位设置：确保父容器设为相对定位，overlay用绝对定位铺满整个容器，避免自身盒模型产生额外空间：

  .float-div {
    position: relative;
    float: left; /* 你的浮动属性 */
    padding: 0;
    margin: 0;
  }
  .float-div .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 其他overlay样式，比如背景色、透明度等 */
  }
  

• 给父容器设置行高为0，消除行内元素的行高空白：

  .float-div {
    line-height: 0;
  }
  

内容的提问来源于stack exchange，提问作者LauraNMS