img 的 3px

今天在做一个测试的时候碰到的问题：用一个 div 包裹一个 img ，代码如下：

html代码：

1 <div class="box">
2     <img src="preloader.gif">
3 </div>

css代码：

.box{
    position:absolute;
    top:40%;
    left:40%;
    background:red;
}

在 Chrome 里看的时候，发现图片下面有条 3px 高的红边儿，在 FF 里看的时候是 5px 的红边儿，把 img 和 div 的 margin 和 padding 都清零，再看也没有效果。百思不得其解。后来，在网上查了下，两个解决方案，自己试过都可以解决：

　　1、img{ display:block; }

　　2、img{ vertical-align:middle; }

 

不大会写，也不大会说，开个博客也没咋用过，本来都觉得无关紧要，能解决问题就行，但是最近在找工作，面试的时候常常临时脑子放空，不知道该说什么了，才意识到有问题了，今天就当做开始吧，以后自己也要多练习讲解，把自己知道的也多拿出来分享，在交流里进步。加油！

 

转载于:https://www.cnblogs.com/caicaidandan/p/4333961.html