容易发现,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. Corona 不同设备分辨率适应

    移动平台下,不同设备的宽高比不同,那么必然存在与游戏设计时的宽高比不一致的情况,Corona的解决方案是定义了一个虚拟的屏幕高宽,比如1024*768,然后在不同设备上通过定义的适应模式去调整这个虚拟 ...

  2. C语言之基本算法40—字符串删除元音字母倒序输出

    //字符串,数组 /* ================================================================== 题目: 输入一行字符,将辅音字母按反序输出 ...

  3. UI设计---&gt;全心全意为人民服务的宗旨----&gt;注重客户体验---&gt;软件持久的生命力

    UI即User Interface(用户界面)的简称. UI设计是指对软件的人机交互.操作逻辑.界面美观的总体设计. 好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适简单.自由.充分 ...

  4. spring与springboot中，如何在static方法里使用自动注入的属性

    第一步:写注解@Component 使当前类成为一个bean对象.(@Controller,@service都行) 第二步:写个static的变量 第三步:写个@PostConstruct注解注解注释 ...

  5. SqlService Date 格式化

    <choose> <when test="dateFlag=='day'"> ), FRI.INVOICE_DATE, ) AS CREATED_ON, & ...

  6. vsftpd出现“Response: 500 OOPS: cannot change directory”解决方法（转载）

    vsftpd出现“Response: 500 OOPS: cannot change directory”解决方法   笔者用的Linux发行版本为centos当用FTP客户端连接时,出现如下错误提示 ...

  7. B1816 扑克牌 二分答案 + 贪心

    这个题我一开始想到了二分答案,但是去写了另一个算法,用优先队列直接模拟,最后GG了...因为我没考虑每个套牌只能有一个joker...尴尬. 后来二分答案,然后暴力验证就行了. 题干: Descrip ...

  8. spring 监听器　IntrospectorCleanupListener简介

    转自:https://blog.csdn.net/ywb201314/article/details/51144256 其中JavaBeans Introspector是一个类,位置在Java.bea ...

  9. 二进制部署Kubernetes-v1.14.1集群

    一.部署Kubernetes集群 1.1 Kubernetes介绍 Kubernetes(K8S)是Google开源的容器集群管理系统,K8S在Docker容器技术的基础之上,大大地提高了容器化部署应 ...

  10. ArrayList 扩容原理

    面试中经常问到的问题之一就是List的扩容机制了,他是怎么做到扩容的,大家都能答出来底层是数组,复制一个数组来扩容,但是再具体一点来说,大家就不知道该怎么说了,如果不看源码说这么多确实就差不多了,但是 ...