使用inline-block实现一个类似float布局效果,但是inline-block的元素间会存在“4px”的空白间距。

span {
display: inline-block;
width: 30px;
height: 30px;
}
<div class="area">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

问题原因

inline-block元素,之间有空白文本。

解决方案

方案一: 删除inline-block元素之间的空白文本

<div class="area"><span></span><span></span><span></span><span></span><span></span></div>

方案二:使用css特殊方法

/*设置父元素样式*/
.area{
font-size: 0;
letter-spacing: -4px;
}

inline-block间隔问题的更多相关文章

  1. inline,block,inline-block的区别

    display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...

  2. 块状元素和内联元素 【inline block】

    // 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...

  3. inline, block, and inline-block

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  4. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  5. inline,block,inline-block解析

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  6. inline-block,inline,block,table-cell,float

    float:left ---------------------------------------------------------------------------------------- ...

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

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

  8. CSS 概念 Block Inline Containing block

    Block 元素 包括 "block-level box," "block container box," and "block box" ...

  9. [CSS3] CSS Display Property: Block, Inline-Block, and Inline

    Understanding the most common CSS display types of block, inline-block, and inline will allow you to ...

  10. 大话css之display的Block未解之谜(一)

    用了几年的css了,css中inline | block |inline-block|table|flex从来没有做过系统的整理和分析,网上的分析文章也很多,零散. 今天有空,就在这做一下整理分析 b ...

随机推荐

  1. google、baidu高级搜索技巧

    1.baidu(可以去高级搜索查看更多信息) intitle搜索范围限定在网页标题:intitle:和后面的关键词之间不要有空格----intitle:中国 site搜索范围限定在特定站点中:“sit ...

  2. linux —— shell 编程(文本处理)

    导读 本文为博文linux —— shell 编程(整体框架与基础笔记)的第4小点的拓展.(本文所有语句的测试均在 Ubuntu 16.04 LTS 上进行) 目录 基本文本处理 流编辑器sed aw ...

  3. PHP用ajia代码写三级联动下拉

    下面是我做三级联动下拉的步骤以及逻辑 第一步:先做一个省市区表格 第二步:建个PHP页面显示用我是在<body>里放<div>用来接收要显示的省市区表格信息,里面嵌入jquer ...

  4. javascript数组基本方法

    一.数组方法 1)concat 该方法用于连接两个或多个数组,返回连接成的新数组的副本,不会改变现有数组 [1,2,3].concat(5,6);//返回[1,2,3,5,6] 2)join 用于把数 ...

  5. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(5)-EF增删改查by糟糕的代码

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(5)-EF增删改查by糟糕的代码 上一讲我们创建了一系列的解决方案,我们通过一个例子来看看层与层之间的关系 ...

  6. 用网页server实现钢琴弹奏(使用Wizwiki-W7500)

      我将为大家介绍一个能够弹钢琴的网页server. 你仅仅须要打开网页,跟着以下步骤,用这个WIZwiki-W7500项目,就能轻松实现用网页server弹钢琴. 很easy. 我们開始吧! 第 ...

  7. systrace跟踪 Android性能优化

    http://blog.csdn.net/oujunli/article/details/8138172 http://blog.csdn.net/oujunli/article/details/50 ...

  8. Qt 学习之路 :信号槽

    信号槽是 Qt 框架引以为豪的机制之一.熟练使用和理解信号槽,能够设计出解耦的非常漂亮的程序,有利于增强我们的技术设计能力. 所谓信号槽,实际就是观察者模式.当某个事件发生之后,比如,按钮检测到自己被 ...

  9. cocoaPods下载使用记录

    cocoaPods下载使用记录 参考地址: 如何在Mac OS 上安装运行Ruby运行环境 http://www.cnblogs.com/daguo/p/4097263.html cocoaPods安 ...

  10. [转]Flex 布局教程:语法篇

    网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...