07-[案例3]图片的默认bug

图片bug.png

图片bug：默认会往下撑开3~6px的间距，与其他元素之间产生间隙

解决方法：

  1. 给图片设置基线对齐

  2. 把图片转换成块元素

<img src="images/9B26531.JPG" alt="">
<div></div>

*{
    margin: 0;padding: 0;
}
div{
    width: 100%;
    height: 100px;
    background-color: #000;
}
img{
    /* 解决方法：一般采取第一种，不会改变img的行内块特点 */
    /* vertical-align: middle; */
    display: block;
}

图片bug解决后显示效果：


解决图片bug.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容