1
<
div
style
="backgrond:red;font-size:12px;"
>
2 < img src ="http://assets.taobaocdn.com/img/chl/fp/logo080808.png" >
3 </ div >
网上有很多这个bug的解决办法,但是都没给为什么会出现这个bug。
2 < img src ="http://assets.taobaocdn.com/img/chl/fp/logo080808.png" >
3 </ div >
div是一个块元素,img是一个行内替换元素。img默认是放置在基线上的。基线: 一图顶千言啊。所以img是在基线上,下面有3px的空白。认识到这个本质以后,就可以轻易的解决问题了。1.img元素生成行内框,设置img的display:block,img将为块元素。2.设置img的vertical-align属性,只要不是baseline都可以。3.img的父层设置font-size:0;(没有文本,还来基线啊)。待续,期待行内框的整理。感觉自己一点也不会写。加油。我相信只要努力一定有回报!