容易发现,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. crm使用FetchXml分组聚合查询

    /* 创建者:菜刀居士的博客  * 创建日期:2014年07月09号  */ namespace Net.CRM.FetchXml {     using System;     using Micr ...

  2. vim copy,find and replace

    VIM选择文本块/复制/粘贴 在正常模式下(按ESC进入)按键v进入可视化模式,然后按键盘左右键或h,l键即可实现文本的选择.其它相关命令:v:按字符选择.经常使用的模式,所以亲自尝试一下它. V:按 ...

  3. 学界| UC Berkeley提出新型分布式框架Ray：实时动态学习的开端—— AI 应用的系统需求：支持（a）异质、并行计算，（b）动态任务图，（c）高吞吐量和低延迟的调度，以及（d）透明的容错性。

    学界| UC Berkeley提出新型分布式框架Ray:实时动态学习的开端 from:https://baijia.baidu.com/s?id=1587367874517247282&wfr ...

  4. bzoj 1029 [ JSOI 2007 ] 建筑抢修 —— 贪心

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1029 想不出来贪心... 首先把任务按结束时间排序: 因为任务一定是越提前做越好,所以从头开 ...

  5. vmware centos7 没有网络设备

    vmware centos7 没有网络设备 选择VMware 虚拟机模拟器为CentOS 64 即可;

  6. SpringMVC使用POST方法传递数据，却出现Request method 'GET' not supported？

    转自:https://segmentfault.com/q/1010000011245770 问题:没有使用get获取当前页面解决方案:   @RequestMapping(value = " ...

  7. 3.3 文件I/O

    错误的解决方法请参考:http://liangruijun.blog.51cto.com/3061169/673776 3.3.2 访问手机中的存储文件夹 3.3.3 读取assets中的文件 pac ...

  8. mysql如何查询最新插入的数据

    在MySQL中,使用auto_increment类型的id字段作为表的主键,并用它作为其他表的外键,形成“主从表结构”,这是数据库设计中常见的用法.但是在具体生成id的时候,我们的操作顺序一般是:先在 ...

  9. Integer应该用==还是equals

    问题引出:“Integer应该用==还是equals” 讨论这个问题之前我们先放一段代码 public static void main(String[] args) { Integer a1 = 2 ...

  10. “发布后tomcat中的classes目录为空”问题

    办法:Project-clean,ok,问题解决.