您的位置:首页 > Web前端 > CSS

img出现莫名的margin问题

2018-02-27 17:39 274 查看
    之前写项目的时候图片小面总是会出现3px的margin,之后再网上搜了一下才知道其原理及解决方法。
    原理是:图片底部的空隙实际上涉及行内元素的布局模型,图片默认的垂直对齐方式是基线,而基线的位置是与字体相关的,所以图片底部的空隙有时是2px 3px或者更多,不同的font-size应该也会影响到空隙的大小,不同的浏览器也会对空隙的大小造成影响,在ff下为3px,IE6更多,而IE8刚好。

    解决方式:

    1、给img定义垂直对齐方式vertical-align为top或者bottom(定义为middle时在IE6还有1px上边距)。

    2、还有就是极端的方法就是设置font-size:0;不建议使用。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息