之前一直用float浮动方法布局，因为display:inline-block有间隙，现在找到办法了。在父元素上面加font-sise:0，就可以了。

效果如图：

代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            body{

                margin: 0;

                padding: 0;

            }

            ul{

                box-sizing: border-box;

                list-style: none;

                margin: 0;

                padding: 0;

                font-size: 0;

            }

            li {

                display: inline-block;

                width: 25%;

                text-align: center;

                box-sizing: border-box;

                border: 1px solid;

            }

            img{

                width: 100px;

                height: 100px;

            }

            p{

                font-size: 20px;

            }

        </style>

    </head>

    <body>

        <ul>

            <li>

                <img src="../img/angle.png" />

                <p>天使在唱歌</p>

            </li>

            <li>

                <img src="../img/angle.png" />

                <p>天使在唱歌</p>

            </li>

            <li>

                <img src="../img/angle.png" />

                <p>天使在唱歌</p>

            </li>

            <li>

                <img src="../img/angle.png" />

                <p>天使在唱歌</p>

            </li>

        </ul>

    </body>

</html>

【小知识点】去除inline-block元素间间距的办法的更多相关文章

  1. CSS3如何去除 inline block 元素之间多出的空格

    display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...

  2. 去除inline-block元素间间距的N种方法

    这篇文章发布于 2012年04月24日,星期二,22:38,归类于 css相关. 阅读 147771 次, 今日 52 次 by zhangxinxu from http://www.zhangxin ...

  3. [转]去除inline-block元素间间距的N种方法

    来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子 ...

  4. 去除inline-block元素间间距的N种方法<转>

    一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...

  5. 去除inline-block元素间间距的N种方法(转)

    一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...

  6. 去除inline-block元素间间距的N种方法-zhangxinxu

    张鑫旭原文:点这里进入原文 另外附上大漠老师的如何解决inline-block元素的空白间距地址!!! 去除inline-block元素间间距的N种方法: 一.现象描述 真正意义上的inline-bl ...

  7. 转载>>去除inline-block元素间间距的N种方法《重》

    一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...

  8. 如何消除inline-block元素间间距问题（转）

    一.现象描述    真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type=" ...

  9. css 小知识点：inline/inline-block/line-height

    inline: 此元素会被显示为内联元素,元素前后没有换行符.因此:无法设置宽度和高度- inline-block: 行内块元素.元素前后没有换行符(CSS2.1 新增的值) 用通俗的话讲,就是不独占 ...

随机推荐

  1. python 获取昨天的日期

    from datetime import timedelta, datetime yesterday = datetime.today()+timedelta(-1) yesterday_format ...

  2. Eclipse项目修改编译jdk版本（Failed to read candidate component class: file 处理）

    转: Failed to read candidate component class: file 处理 2018年03月09日 07:15:54 爱萨萨 阅读数 10041   出错现象: org. ...

  3. JAVA-开发构建Gradle项目安装使用教程

    一.简介: Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化构建开源工具.它使用一种基于Groovy的特定领域语言(DSL)来声明项目设置,目前也增加了基于Kotl ...

  4. ffprobe读取音视频元数据信息，json格式输出

    命令格式: ffprobe -v quiet -show_format -show_streams -print_format json F:\temp\test1566606924822.wav 输 ...

  5. Consul 随记

    consul 包含多个组件,但是作为一个整体对外提供服务发现和服务配置工具: 提供的关键特性有: 服务发现:发现的是服务对应的IP地址和PORT端口号 健康检查:检查服务节点状态 Key/Value存 ...

  6. Linux基础（特基本的那种）知识

    (自己的随手笔记,记得有点乱请轻喷) which:查看某个命令的完整路径df -h:查看系统磁盘情况history:查看历史输入的命令 网卡配置路径:vim /etc/sysconfig/networ ...

  7. python logging模块【转载】

    转自:https://www.cnblogs.com/dahu-daqing/p/7040764.html 参考:老顽童log模块,讲的很细致,基本上拿到手就可以直接用了,很赞 1 logging模块 ...

  8. Java学习笔记-设计模式

    常见设计模式有23种,设计模式是解决某一类问题最行之有效的方法 单例设计模式 解决一个类在内存中只存在一个对象 思想 为了避免其他程序过多建立该类对象.先禁止其他程序建立该类对象 还为了让其他程序可以 ...

  9. 最新 房多多java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.房多多等10家互联网公司的校招Offer,因为某些自身原因最终选择了房多多.6.7月主要是做系统复习.项目复盘.LeetCo ...

  10. 34.TCP非阻塞连接及套接字异常处理丶端口扫描脚本

    TCP非阻塞及套接字异常处理: TCP阻塞套接字异常捕获: 套接字创建失败,8000 socket.error 客户端连接错误: ConnectionRefusedError socket.gaier ...