如何移除网页中图片底部与外层边框之间的空白区域？

我尝试将图片放置在网页顶部居中位置，并为其添加5px的边框。操作看似简单，但图片底部与边框之间出现了一条无法消除的4px高度空白条。以下是网页完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>marioMafia - home</title>
</head>
<body>
    <div class="container" id="randomLogo">
        <img src="miniMarioLogo.jpg" alt="randomLogo" style="width:100%">
    </div>
    <style>
        #randomLogo {
            position: relative;
            margin-left: auto;
            margin-right: auto;
            max-width: 400px;
            border: 5px solid #333;
        }
    </style>
</body>
</html>

注：各类尺寸比例的图片均存在该问题。

这个问题的核心原因是：<img>标签默认是行内替换元素，会和文本基线对齐，底部的空白就是基线下方的预留空间。你可以通过以下几种方法解决：

• 方法1：将图片设为块级元素
  给<img>添加display: block;样式，消除行内元素的基线间隙：

<img src="miniMarioLogo.jpg" alt="randomLogo" style="width:100%; display:block;">

• 方法2：修改容器的行高或对齐规则
  在容器#randomLogo中添加line-height: 0;，直接消除行内元素的行高预留空间：

#randomLogo {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 400px;
    border: 5px solid #333;
    line-height: 0;
}

• 方法3：调整图片的垂直对齐方式
  给<img>添加vertical-align: bottom;（或top/middle），改变其在容器内的对齐位置，消除底部空白：

<img src="miniMarioLogo.jpg" alt="randomLogo" style="width:100%; vertical-align:bottom;">

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