移除网页底部空白：窗口窄于300px时图片下方空白问题

我给网页里的图片设置了300px的最小宽度，当窗口缩小到小于300px时，图片下方会出现空白区域，希望彻底消除这个空白。相关代码如下：

CSS 代码 #

* {
  margin: 0;
  padding: 0;
}

.bakgrunn {
  width: 100%;
  min-width: 300px;
}

HTML 代码 #

<img src="https://placehold.co/600x300/png" class="bakgrunn" alt="Fantasy Gambling">

解决方案 #

问题根源是图片默认的行内块元素特性，行内块元素会和文字基线对齐，导致底部产生空白。以下是两种简单有效的解决方法：

• 方法一：将图片设为块级元素
  修改.bakgrunn的CSS，添加display: block;，彻底消除行内元素带来的基线空白：

  * {
    margin: 0;
    padding: 0;
  }
  
  .bakgrunn {
    width: 100%;
    min-width: 300px;
    display: block; /* 添加此行 */
  }
  

• 方法二：调整图片垂直对齐方式
  给图片设置vertical-align: bottom;（或top/middle），改变其基线对齐行为：

  * {
    margin: 0;
    padding: 0;
  }
  
  .bakgrunn {
    width: 100%;
    min-width: 300px;
    vertical-align: bottom; /* 添加此行 */
  }
  

两种方法都能彻底消除窗口缩小时图片下方的空白区域，根据实际场景选择即可。

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