容易发现,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. powerdesigner 16.5 视图的显示

    今天中午为了解说绘图.然后把toolbox跟object brower都关掉了,花了1个小时才找到toolbox 1.object brower显示 直接使用快捷键 ALT+0 2.toolbox(也 ...

  2. HTML网页之计算器代码

    计算器网页效果显示:点击这里! <script>  function show(){  var date = new Date(); //日期对象  var now = "&qu ...

  3. 简化bigdecimal计算的小工具类

    简化bigdecimal计算的小工具类 如果我们要做一个加法运算,需要先将两个浮点数转为String,然后够造成BigDecimal,在其中一个上调用add方法,传入另一个作为参数,然后把运算的结果( ...

  4. U4704 函数

    U4704 函数 题目背景 设gcd(a,b)为a和b的最大公约数,xor(a,b)为a异或b的结果. 最大公约数 异或 题目描述 kkk总是把gcd写成xor.今天数学考试恰好出到了gcd(a,b) ...

  5. 【Ubuntu】小技巧

    1.在 usr/share/applications/ 中可以找到 .desktop 文件,修改其内容可以修改你的桌面快捷方式, 例如图标或者分类还可以新建你的 .desktop ,如果你安装的软件没 ...

  6. hdu 1532 Drainage Ditches(最大流）

                                                                                            Drainage Dit ...

  7. 【POJ 3740】 Easy Finding

    [题目链接] http://poj.org/problem?id=3740 [算法] Dancing Links算法解精确覆盖问题 详见这篇文章 : https://www.cnblogs.com/g ...

  8. bzoj 4521 [ Cqoi 2016 ] 手机号码 —— 数位DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4521 数位DP,记录好多维状态: 写了半天,复杂得写不下去了,于是参考一下TJ... 练习简 ...

  9. Building a Space Station(bfs)

    http://poj.org/problem?id=2031 题意:给出n个球的圆心坐标x,y,z, 半径r,若任意两球不相交,则在两球间建桥.问需建桥的最短距离是多少. 思路:建图,以两球间相差的距 ...

  10. 一段时间加载的js函数

    <html><head><meta charset="utf8"><script type="text/javascript&q ...