去除inline-block元素间间距，比较靠谱的两种办法

1.使用注释符号

1     <div><span class="1">1</span></div><!--
2     --><div><span class="2">2</span></div><!--
3     --><div><span class="3">3</span></div><!--
4     --><div><span class="4">4</span></div>

楼主对代码格式比较计较，这是动标签这边相对来说楼主可以接受的方式。

2.使用font-size和letter-space

html部分<body><div><span class="1">1</span></div><div><span class="2">2</span></div><div><span class="3">3</span></div><div><span class="4">4</span></div>
</body>

css 部分<style>body {width: 100%;margin:0;text-align: center;font-size: 0;letter-spacing: -2px;}div{display: inline-block;width: 50%;background: lightblue;font-size: 36px;position: relative;vertical-align: middle;}div:before {content:"";display: inline-block;padding-bottom: 100%;vertical-align: middle;}div:nth-child(2),div:nth-child(3){background: pink;}span {display: inline-block;vertical-align: middle;font-size: 6em;color: #fff;}</style>

主要就是在外层body添加

font-size:0,--兼容chrome

letter-spacing:-2px,--兼容safari ,据说要根据字体大小调整，但是楼主用了88px的字体也没有问题，这个具体情况具体解决吧

转载于:https://www.cnblogs.com/yiguozhi/p/5523771.html

去除inline-block元素间间距，比较靠谱的两种办法相关推荐

css a 标签上下间距_CSS实用技能：去除inline-block元素间间距的7种方法
现象描述真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: 两个相邻的radio之间总是多那么一点点的间距,不是margin也不是paddin ...
去除inline-block元素间间距
根本原因:inline-block元素之间之所以有空白间距是因为空格有字体大小原因. 第一种: 把代码之间的换行空白都去掉. 例如: <div>第一个inline-block元素</ ...
[转载] Python 从字符串匹配相同元素的所有下标位置（两种办法解析）
参考链接: 如何检查字符串在Python中是否为有效关键字? 打个比方比如取一个字符串定位第10个'\t'的位置方法1 def test_data(a,b): elmt_index=[] s_ind ...
去除内联元素之间的间距
div{width:900px;} div a{ display:inline-block; width:300px;} <div> <a href="" ...
【inline、inline-block间的空隙】
文章目录一.正确认识 "空隙"(空白符) 1. 你在使用 inline.inline-block 元素时,是否经常遇到过这个问题? 2. 为何会产生"空隙"? ...
关于css的display:flex inline block inline-block和float
1.解释一下display的几个常用的属性值,inline , block, inline-block inline(行内元素):使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行, ...
[CSS]详解display:inline | block |inline-block的区别
2019独角兽企业重金招聘Python工程师标准>>> [CSS]详解display:inline | block |inline-block的区别[点评网站][发布新闻][申请专栏 ...
inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
父元素onmouseover触发事件在父子元素间移动不停触发的问题
今天写了一个侧边栏动态展开收缩的效果 <!DOCTYPE html> <html lang="en"> <head><meta chars ...

去除inline-block元素间间距，比较靠谱的两种办法

去除inline-block元素间间距，比较靠谱的两种办法相关推荐

最新文章

热门文章