之前一直用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. Eclipse的视窗

    PackageExplorer 显示项目结构,包,类,及资源 Outline 显示类的结构,方便查找,识别,修改 Console 程序运行的结果在该窗口显示 Hierarchy 显示Java继承层次结 ...

  2. 【思考】为什么说Bagging减少variance，Boosting减少bias？（转载）

    具体讨论可见于此知乎问题,有很多种理解方向,甚至这一个命题可能本来就不成立!

  3. mfc判断当前程序是否正在运行

    HANDLE hMutex = CreateMutex(NULL,TRUE,_T("appName")); if(hMutex) { if(ERROR_ALREADY_EXISTS ...

  4. PAT 甲级 1021 Deepest Root (25 分)（bfs求树高,又可能存在part数part>2的情况）

    1021 Deepest Root (25 分)   A graph which is connected and acyclic can be considered a tree. The heig ...

  5. kubernetes 之kubelet客户端证书过期问题处理 KubeClientCertificateExpiration apiserver (monitoring/k8s warning) Kubernetes API certificate is expiring in less than 7 days.

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4gAAAKMCAYAAAAZj+XuAAABfGlDQ1BJQ0MgUHJvZmlsZQAAKJFjYG ...

  6. 总是访问到tomcat首页解决

    部署代码后总是访问到tomcat首页解决 没有把路径写全 访问:养成带上绝对路径的习惯,否则总是访问到tomcat的首页 http://114.116.65.232:8085/ssoserver/

  7. Ubuntu之安装PXE+Kickstart无人值守安装操作系统

    CentOS安装PXE见 https://www.cnblogs.com/minseo/p/10774030.html 本文介绍Ubuntu系统安装pxe 1,环境查看 服务器ip地址:192.168 ...

  8. IDEA注释模板

    (1)Getter和Setter 生成代码的同时注释 添加新模板 输入模板生产代码: 其实就是InteliJ Default默认模板上面我们添加了生产注释,Getter的生成代码就是默认模板的. Ge ...

  9. noi openjudge 6044：鸣人和佐助

    http://noi.openjudge.cn/ch0205/6044/ 描述佐助被大蛇丸诱骗走了,鸣人在多少时间内能追上他呢? 已知一张地图(以二维矩阵的形式表示)以及佐助和鸣人的位置.地图上的每个 ...

  10. JAVA日常之四

    构造函数 又称“构建器”,函数名称与类名称完全相同,无返回值. 每个类都有构造函数. 可以自定义构造函数,并且可以创建多个重载/过载的构造函数. 若没有手动创建该函数,总会存在一个默认的构造函数(无参 ...