CSS：margin遇上inline，各浏览器的反映

最新推荐文章于 2024-04-15 19:17:28 发布

高端客户

最新推荐文章于 2024-04-15 19:17:28 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： display inline block margin

本文链接：https://blog.youkuaiyun.com/u013240519/article/details/82857521

CSS 专栏收录该内容

3 篇文章

订阅专栏

本文探讨了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>

在这里插入图片描述