[css]记录：两个display: inline-block;内联块元素之间的空隙问题
clq
浏览(608) -
2019-12-08 18:41:59 发表
编辑
关键字: css_main
https://blog.csdn.net/weixin_44402694/article/details/85860177
--------------------------------------------------------
记录：两个display: inline-block;内联块元素之间的空隙问题
2019-01-05 17:06:40 汪 同 学 丶 阅读数 485 收藏 更多
分类专栏： css
举例：inline-block之间存在空隙
inline-block之间存在空隙
inline-block之间存在空隙
1
2
3
4
5
/*css:*/
.example span {
display: inline-block;
background: #ccc;
}
1
2
3
4
5
之间存在空隙
问题：出现空隙的原因是元素之间的空格存在
解决1：inline-block元素不换行
inline-block之间存在空隙inline-block之间存在空隙
1
2
3
解决2：inline-block元素标签不闭合
inline-block之间存在空隙
inline-block之间存在空隙
1
2
3
4
注意：如果有ie兼容需求：最后一个元素标签要闭合 如下
inline-block之间存在空隙
inline-block之间存在空隙
1
2
3
4
解决3：inline-block元素标签之间使用注释
inline-block之间存在空隙inline-block之间存在空隙
1
2
3
4
解决4：inline-block元素父级设置font-size: 0;，inline-block元素内设置字体大小
.example {
font-size: 0;
}
.example span {
display: inline-block;
background: #ccc;
font-size: 16px;
}
1
2
3
4
5
6
7
8
注意： 兼容chrome，取消chrome最小字体大小限制
.example {
font-size: 0;
-webkit-text-size-adjust:none;
}
.example span {
display: inline-block;
background: #ccc;
font-size: 16px;
}
1
2
3
4
5
6
7
8
9
参考文章地址：https://www.cnblogs.com/bigboyLin/p/4624805.html
NEWBT官方QQ群1: 276678893
可求档连环画,漫画;询问文本处理大师等软件使用技巧;求档softhub软件下载及使用技巧.
但不可"开车",严禁国家敏感话题,不可求档涉及版权的文档软件.
验证问题说明申请入群原因即可.
