容易发现,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. 苹果iPhone6为何拯救不了富士康？

    最近有媒体报道,富士康正在招聘10万名新员工,这比美国5个州不论什么一个大城市的市民都还多.而招这些工人的目的就是生产下一代iPhone手机.分析师估计该手机的推出时间将在10月.对此,英国的< ...

  2. Android序列化的存储和读取

    Android中序列化的实现有两种方式:Serializable接口和Parcelable接口,本文对这两种方式进行简单的总结和使用. 一．相关概念 (一)序列化的原因(序列化能实现的效果) 1.永久 ...

  3. SVM最通俗的解读

    摘自:https://www.zhihu.com/question/21094489/answer/86273196 什么是SVM? 当然首先看一下wiki. Support Vector Machi ...

  4. 【K8s】Kubernetes架构理解

    抽空学习了一下Kubernetes,感觉和大数据领域内集群的资源管理.任务调度等有异曲同工之处,简单总结一下备忘. [概念] Kubernetes是一个工业级的容器编排平台,单词有点长,常用K8s代称 ...

  5. 数据通讯与网络 第五版第24章 传输层协议-UDP协议部分要点

    24.1 介绍 本章节主要集中于传输层协议的解读,图24.1展示TCP.UDP.SCTP在TCP\IP协议栈的位置 24.1.1 服务(Service) 每个协议都提供不同的服务,所以应该合理正确的使 ...

  6. Cracking the Coding Interview 10.7

    Design an algorithm to find the kth number such that the only prime factors are 3,5 and 7 方法一: a[i]= ...

  7. java反射机制学习小结

    之前一直对java的反射机制理解得很模糊,今天因为学习spring,所以花了些时间总算把它理顺了,记录一下 另外,推荐读读这篇文章,写的挺好的http://blog.csdn.net/woshixuy ...

  8. 关于TJOI2014的一道题——Alice and Bob

    B Alice and Bob •输入输出文件: alice.in/alice.out •源文件名: alice.cpp/alice.c/alice.pas • 时间限制: 1s 内存限制: 128M ...

  9. netty 引用计数对象（reference counted objects）

    [Netty官方文档翻译]引用计数对象(reference counted objects) http://damacheng009.iteye.com/blog/2013657

  10. SQLServer 在存储过程里使用事务控制的简单小例子

    alter proc sp_test(     @name varchar(50))asbegin    --开始事务   begin transaction   --设置一个存储报错代码的变量   ...