盒子装载图片时出现的盒子比图片实际偏高的问题

一个盒子若是不设置高度的话；而这个盒子里面又插入了一张图片的话；
本来这个盒子的高度会和图片的高度一样；但是实际的情况确实盒子的高度会比这个图片的高度高一些；

问题原因：图片默认是以基线的方式和和对齐的

解决方法：只要把这个默认值给改了就不会出现这个情况。
1.在图片中加入以下的代码：

 vertical-align: middle/top/bottom;   //这三个值都可以
 //默认值时base-line

2、img的父标签添加

font-size:0;

3、img是inline-block元素转成block元素

img{
	display:block;
}

行内元素默认是以baseling对齐的
但是有时候这个设定值会有问题出现
比如设置图片加一个遮罩层的话，这时候就会出现图片不会和这个遮罩层完全重合的情况
如下图所示：

在这里 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            position: relative;
            width: 300px;
            /* height: 187.5px; */
            /* font-size: 0;
             */
             /* line-height: 0; */
            
        }
        .box img{
            width: 100%;
            vertical-align: bottom;
        }

        .mark {
            position: absolute;   
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,.5);
            
            /* inset: 0; */
            /* z-index: 9; */
        }
插入代码片

在这里插<div class="box">
        <img src="images/birds.jpeg" alt="">
        <div class="mark"></div>
    </div>入代码片

解决方案：
父亲元素加上

 font-size: 0;
 //或者
  ine-height: 0; 

或者行内元素加上：

 vertical-align: bottom;