解决img标签自带边距的问题

问题

为img标签设置遮罩时，发现虽然设置bottom:0; 但是遮罩并没有完全贴合图片。
       

     * {
            margin: 0;
            padding: 0;

        }

        html,
        body {
            display: flex;
            width: 100%;
            height: 100%;
        }

        .banner {
            position: relative;
            margin: auto;
        }
      
        img {
            width: 1226px;
            height: 600px;
        }

        .mask {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 150px;
            width: 1226px;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }

如下图显示，遮罩并没有完全贴合图片。

将遮罩的z-index设置为-1时，此时可以清楚的看到遮罩超出了图片一部分。

原因是因为浏览器会将行内元素与行内块元素当作文字处理，而文字类型元素的垂直对齐方式默认为基线（baseline）。

解决方法

于是找到了4种方法消除这个影响：

         1.img设置为块级元素

 img {
            display: block;
            width: 1226px;
            height: 600px;
        }

        2.给img的父级元素设置高度

  .banner {
            position: relative;
            margin: auto;
            height: 600px;
        }

        3.将img父级元素的font-size设置为0

  .banner {
            position: relative;
            margin: auto;
            font-size: 0;
        }

        4.img垂直对齐方式设置为非基线对齐

   img {
            vertical-align: middle; 
            width: 1226px;
            height: 600px;
        }

使用任意方法后，遮罩与img就完全贴合了：