CSS:margin遇上inline,各浏览器的反映

本文探讨了inline元素在不同浏览器下因默认垂直对齐方式造成的显示间隙问题,通过两种方法实现跨浏览器兼容性调整:一是设置父元素font-size为0并调整margin-left;二是将元素设为display:block并float:left,同时调整margin-left。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、inline

元素默认垂直对齐方式为以父元素的baseline,但是展示时又是以bottomline为对齐方式,因此造成了元素之间的间隙。
在这里插入图片描述

2、例子

 <div style="position: fixed; top: 10px; right: 10px; ">
        <img width="60px" height="60px" src="1.png" style="display: inline;" />
        <img width="60px" height="60px" src="1.png" style="display: inline;" />
        <img width="60px" height="60px" src="1.png" style="display: inline;" />
    </div>
    <div style="position: fixed; top: 100px; right: 10px; ">
        <img width="60px" height="60px" src="1.png" style="display: inline;" />
        <img width="60px" height="60px" src="1.png" style="display: inline;" />
        <img width="60px" height="60px" src="1.png" style="display: inline;margin-left: -65px;" /> //65=元素宽度+间隙(一般为5px左右)
    </div>

界面:左侧为Firefox,右侧为chrome;
浏览器不一样,建议不一样,父元素的宽度也不一样,当设置margin-left时,会出现细微的差异。(该例子中-65px和-64px在Firefox中的效果不一样,可以自己测一下)。
在这里插入图片描述

3、修改:兼容各版本

 //第一种:
 //div 设置font-size: 0px;
 //margin-left设置元素宽度
  <div style="position: fixed; top: 200px; right: 10px; font-size: 0px;">
        <img width="60px" height="60px" src="1.png" style="display: inline;" />
        <img width="60px" height="60px" src="1.png" style="display: inline;" />
        <img width="60px" height="60px" src="1.png" style="display: inline;margin-left: -60px;" />
    </div>
    
    //第二种
    //将同类元素都设为display: block;float: left; 
    //偏移元素设置margin-left设置元素宽度
    <div style="position: fixed; top: 300px; right: 10px; ">
        <img width="60px" height="60px" src="1.png" style="display: block;float: left;" />
        <img width="60px" height="60px" src="1.png" style="display: block;float: left;" />
        <img width="60px" height="60px" src="1.png" style="display: block;margin-left: -60px;float: left;" />
    </div>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值