常见的浏览器解析问题

图片下间隙问题

现象：图片和包裹图片的盒子的底边框有一定的距离 大约3px
原因：

解决：
方法1：修改图片对齐方式为不是基线对齐即可(top,middle,bottom) vertical-align
方法2: f父盒子加font-size:0px; line-height:0px;

**方法3：**将图片转换为块类型元素

 <div class="box">
        <img src="./image/hw01.jpg" alt="">
    </div>

     .box {
            width:300px;
            border:1px solid #000;
            margin: 50px auto;

            /* 
            方法2：
            font-size: 0;
            line-height: 0; */
        }
        /*
        方法1：
         img {
            vertical-align: top;
        } */
        
        img {

            /*
            方法3：
             display: block; */
        }

2、输入框和提交按钮对不齐的现象

对不齐的原因：文本框的内边距和边框不算在盒子的宽高内 而按钮的内边距和边框默认算在盒子的宽高内

解决:给按钮和文本框清除边框和内边距 在加上自己的边框 然后文本框做宽高内减 按钮不用内减