父元素div跟子元素img大小有0.2误差,不知道从哪里来?

 

问题描述:

这是img标签的插入图片后的大小

这是div由img撑开的大小,不清楚这个0.2误差是从哪里来的

父元素div,默认样式已经清除了,但是父元素div跟img元素的0.2px误差从何而来
求大神指点,十分感谢


 

第 1 个答案:

img的布局确实挺奇葩的,因为img是行内块级元素,而div是块级元素,由于某些玄学的原因,img为行内块级元素时就会有一个很小的错位,用浮动清除内联样式或者设置display: block;应该就可以正常了。

也可以参见这篇文章
http://blog.sina.com.cn/s/blo...


 

第 2 个答案:

踩的不知所谓,有不同意见倒是发评论啊。

楼上的答案基本没毛病,但这是有原因的。
inline 元素会有一个错位,是因为浏览器把它作为一行字来看。
众所周知,英文 a c e 等字母写在格子中间,而 b d p f 等字母则要么往上要么往下突出了一段。
而 inline 元素留下的那一小空白,就是给这些字母留下的。
因此解决办法也很简单,负边距消除,或者改变 display 设定都可以。


1 html 结构<div> <img/></div>2 div节点3 img节点4 cssdiv{ padding:0} img{ width:100%}5 ...