容易发现,inline-block元素之间会有间距,

 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

     <style type="text/css">

         *{padding:0;margin:0;}

         ul{list-style-type:none; }

         li

         {

             display:inline-block;

             width:60px;

             height:60px;

             line-height:60px;

             font-size:30px;

             text-align:center;

             color:White;

             background-color:Purple;

         }

     </style>

 </head>

 <body>

     <ul>

         <li>A</li>

         <li>B</li>

         <li>C</li>

     </ul>

 </body>

 </html>

效果图:

要消除这种间距,可以对其父元素设置font-size:0;

在本例中,对ul设置font-size为0后,效果如下:

img等inline-block元素亦是如此设置;

另外,之前提到的负margin特性也可以实现这一功能.

font-size:0消除元素间距的更多相关文章

  1. jquery中判断选择器，找没找到元素用$().size()==0

    jquery中判断选择器,找没找到元素用$().size()==0

  2. 巧用Drawable 实现Android UI 元素间距效果

    源文地址: 巧用Drawable 实现Android UI 元素间距效果 在大部分的移动UI或者Web UI都是基于网格概念而设计的.这种网格一般都是有一些对其的方块组成,然后它们组合成为一个块.使用 ...

  3. 【HTML笔记】--- 内联元素间距问题及解决方案

    一.内联元素间距问题 在HTML实践中我们会发现,有时候内联元素之间会存在一定的间距,并且这间距和margin和padding无关.这是由编辑时的空白字符引起的,并且间距的大小受父元素的font-si ...

  4. [转载] C++ STL中判断list为空，size()==0和empty()有什么区别

    关于两个的区别,首先size()==0为bool表达式,empty()为函数调用,这一点很明显.查看源代码, bool empty() const { return _M_node->_M_ne ...

  5. unity UGUI text font size对性能影响较大

    Font Size对ugui text的性能影响非常大. <Cube Duck Run>在itouch5上测试是很流畅的,但是在iphone5上测试,在game over后显示历史最高分时 ...

  6. list=null和list.size=0的区别

    声明转载自:https://blog.csdn.net/iblade/article/details/50506398/ 转载自:https://blog.csdn.net/Hallelujah__/ ...

  7. empty()和size() == 0有区别吗

    empty()和size() 这里说的empty()和size()都是STL的容器中提供的接口,分别用来判断当前容器是否为空和获取当前包含的元素个数 区别 其实按道理来说两者应该是相等的,而且STL容 ...

  8. 2015.5.2-2015.5.8 Tip jQuery ，前端组件库，inline-block元素间距等

    有忙于它事,故延迟了,但在坚持! 1.Tip jQuery   2.给span加display: inline-block; 怎样能对齐? 解决方法:vertical-align: bottom:   ...

  9. mariadb:InnoDB: Error: log file ./ib_logfile0 is of different size 0 5242880 bytes

    mariadb 启动中 InnoDB: Error: log file ./ib_logfile0 is of different size 0 起因:线上正在运行的系统,因为需要调整性能,变更了my ...

随机推荐

  1. 使用oracle数据库和MySQL数据库时hibernate的映射文件.hbm.xml的不同

    假设是使用oracle数据库.那么hibernate的映射文件.hbm.xml例如以下: <id name="xuehao" column="xuehao" ...

  2. Jmeter压测问题_Non HTTP response code: java.net.ConnectException

    负载机压测,线程500,服务器根本无压力,负载机本身发的请求都是失败的 Sample result如下: Thread Name: 考勤(考勤提交) 1-255 Sample Start: 2018- ...

  3. PL/SQL Developer使用技巧、快捷键(转发)

    转发自:https://www.cnblogs.com/linjiqin/archive/2013/06/24/3152538.html PL/SQL Developer使用技巧.快捷键 1.类SQL ...

  4. Android+Jquery Mobile学习系列(7)-保险人信息

    [保险人管理]是这个APP最重要的功能,用于保存保险客户的数据,给后面的功能提供数据支撑. 简单说说[保险人管理]功能:主要就是增.删.改.查四个功能,在新增和修改的时候不仅可以保存保险人的姓名.身份 ...

  5. hdu1150——最小点覆盖

    As we all know, machine scheduling is a very classical problem in computer science and has been stud ...

  6. [BZOJ 1741] Asteroids

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1741 [算法] 将每颗小行星的行,列相连,问题就转化为了求这张图的最小覆盖 由kon ...

  7. tarjan用法——割点

    今天洛谷疯狂给我推送tarjan的题(它好像发现了我最近学tarjan),我正好做一做试一试(顺便练一练快读和宏定义). 其实找割点的tarjan和算强连通分量的tarjan不一样,找割点的判定条件比 ...

  8. ubuntu 12.10 禁用触摸板

    1. 打开终端,输入 sudo rmmod psmouse 禁用触摸板,输入 sudo modprobe psmouse 恢复触摸板 2.syndaemon -i 10 -d >/dev/nul ...

  9. uva1084

    状压dp+凸包 并没有看出来凸包的性质 首先答案一定在凸包上,然后每个凸包的角加起来是一个圆,那么就相当于凸包周长加一个圆了.然后预处理,再状压dp计算即可. #include<bits/std ...

  10. Django day04 路由控制

    Django请求的整个的生命周期 Django中路由控制的作用: 一: 简单配置 url 是一个函数 -第一个参数是正则表达式(如果要精确匹配:'^publish'/$ 以^开头,以$结尾) -第二个 ...