父元素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 ...