inline-block间距

乌巢禅师
• 阅读 2362

大家好 我是程序员

1.背景介绍

我们在做移动端页面的时候,经常会用到inline-block元素来布局,但无可避免都会遇到一些问题,就是inline-block元素之间的间隙。这些间隙会导致一些布局上的问题,需要把间隙去掉。对于inline-block元素及其去掉间隙的方法,在这里做一个简单的总结。

2.知识剖析

inline-block是什么?

inline-block是内联块元素,在CSS的元素分类中可以分成三种:行内元素或者内联元素、块级元素、以及内联块元素。

3.常见问题

间距如何产生的?

我们在书写标签的时候,为了代码的简洁直观会换行,但是浏览器在解析的时候会把这个换行解析成一个字符,就是所谓的间距,如果我们不换行,那当然也不会有间距了。

4.解决方案

(1)移除标签间的空格。

(2)把span标签的结束标签去掉,这样间隙就没有了。为了兼容IE6/IE7,最后一个标签需要闭合。(美团webapp页面也使用了这种方法)

(3)使用margin负值。

(4)在父元素上加上font-size:0;

(5)使用letter-spacing

6.扩展思考

7.参考文献

8.更多讨论

在移动端的页面中,个人倾向于设置font-size:0这种方法来清除掉。当然,每个人都有每个人的习惯,用着顺手就行。

ppt

视频

点赞
收藏
评论区
推荐文章
明月 明月
3年前
css实现文字两端对齐
language这是摘哦给你发觉得斯蒂芬这是摘哦给你发觉得斯蒂芬在块级元素box上面,加上textalign:justify;,在span元素上加上样式languagedisplay:inlineblock;paddingleft:100%;效果图
Wesley13 Wesley13
3年前
CSS实现自适应九宫格布局 大全
看到微博和朋友圈都实现了图片九宫格,曾经有次面试也问到了九宫格这个问题,当时想到的是先固定每个单元格的宽高,然后进行浮动。今天想折腾一下,实现自适应父元素宽度的布局。这次我只写了四种方式去实现九宫格,算上inlineblock的话就是五种了。首先要注意的是九宫格容器是宽高相等的正方形,并且是自适应的,这里关键是实现宽高相等,有些人想到了相对视口宽度
Stella981 Stella981
3年前
JavaScript同步、异步及事件循环
同步、异步JS是单线程的,每次只能做一件事情。像以下这种情况,代码会按顺序执行,这个就叫同步。console.log(1);console.log(2);console.log(3);以下代码会输出2、3、1,像这种不按顺序执行的,或者说代码执行中间有时间间隙的,叫异步。setTimeout((
Stella981 Stella981
3年前
RobotFramework自动化测试之元素定位
前言:最近在做基于RF框架的Web自动化测试,其中涉及到元素的定位,主要用到id、name、xpath、css四中定位方法,尤其后面的两种方法特别有效,可以解决大部分的定位问题。
Caomeinico Caomeinico
3年前
用增量备份来快速恢复dg
用于解决存档日志文件丢失或损坏、无法解决的存档间隙或需要在不应用大量存档日志文件的情况下及时前滚备用数据库的问题。备库关闭mrp后确认当前scnRECOVERMANAGEDSTANDBYDATABASECANCEL;SELECTCURRENTSCNFROMV$DATABASE;主库发起增量备份(依据上面查出来的scn)BACKUPINCREM
Wesley13 Wesley13
3年前
CSS内容布局
网页是由不同内容块构成的:标题、段落、链接、列表、图片、视频,等等。1.定位定位并不适合总体布局,因为它会把元素拉出页面的正常流。元素的初始定位方式为静态定位(static),即块级元素垂直堆叠。把元素设置为相对定位(relative),然后可以相对于其原始位置控制该元素的偏移量,同时又不影响其周围的元
Wesley13 Wesley13
3年前
BFC清除浮动
BFC就是清除浮动用来处理文档脱离文档流的问题清除浮动的方法:a、父元素也添加一个浮动    产生弊端就是:margin不能使用b、给父元素添加一个:display:inlineblock     弊端同a一样:无法使用marginc、给父元素添加高     
Wesley13 Wesley13
3年前
CSS中清除浮动的作用以及如何清除浮动
1.什么是浮动,浮动的作用“浮动”从字面上来理解就是“悬浮移动、非固定”的意思。块级元素(div、table、span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观。这就要用到浮动了。被设置浮动的元素会脱离标准流(竖直排列),从而达到水平排列的效果。例如.未设置浮动时图1中的两张图片竖直排列在父级元素(橙色区域)
Stella981 Stella981
3年前
Hibernate纯sql查询结果和该sql在数据库直接查询结果不一致
问题:今天在做一个查询的时候发现一个问题,我先在数据库实现了我需要的sql,然后我在代码中代码:selectdistinctd.id,d.name,COALESCE(c.count_num,0),COALESCE(c.count_fix,0),COALESCE(c
MySQL innoDB 间隙锁产生的死锁问题 | 京东云技术团队
背景线上经常偶发死锁问题,当时处理一张表,也没有联表处理,但是有两个mq入口,并且消息体存在一样的情况,频率还不是很低,这么一个背景,我非常容易怀疑到,两个消息同时近到这一个事务里面导致的,但是是偶发的,又模拟不出来什么场景会导致死锁,只能进行代码分析,问
线上SQL超时场景分析-MySQL超时之间隙锁 | 京东物流技术团队
前言之前遇到过一个由MySQL间隙锁引发线上sql执行超时的场景,记录一下。背景说明分布式事务消息表:业务上使用消息表的方式,依赖本地事务,实现了一套分布式事务方案消息表名:mqmessages数据量:3000多万索引:createtime和statuss
乌巢禅师
乌巢禅师
Lv1
会当凌绝顶,一览众山小。
文章
4
粉丝
0
获赞
0