1、display:inline-block在水平方向的间隙；

代码如下：

<style type="text/css">
        *{margin:0; padding:0;}
        .test{width:600px; border:1px blue solid;}
        .test div{width:100px; height:100px; display:inline-block;background:blue;} 
    </style>
</head>
<body>
<div class="test">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
效果如下：

四个div之间有小间距，解决办法：让水平间隙消失就是在父级上加font-size:0;让垂直间隙消失，就在子元素上加vertical-align:bottom;就不贴代码了，
如果子标签内加上任意文字，则display:inline-block元素不会生成垂直方向有空白！ 下面是解决好的效果：

display:inline-block的间隙问题和解决办法的更多相关文章

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

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

  2. 行内块inline-block元素之间出现空白间隙原因及解决办法

    首先,来看下具体的问题,下面是用inline-block布局实现的两边固定宽度,中间自适应的html代码: 1 2 3 4 5 6 7 8 9 <section class="layo ...

  3. IE6中的常见BUG与相应的解决办法

    开发前端的同学一定都知道,IE6是兼容BUG最多的浏览器,它不支持PNG alpha通道暂且不论.其文档的解析理解规范也引起了诸多恼人的BUG,有时甚至让人感到绝望.本文主要讲解一些比较容易遇到的IE ...

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

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

  5. display:inline、block、inline-block的区别

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

  6. display:inline; display:block;

    block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...

  7. display:block、display:inline与displayinline:block的概念和区别

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

  8. 理解display:inline、block、inline-block

    要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...

  9. display:inline 跟 display:block 跟 display:inline-block区别

    我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...

随机推荐

  1. vtk多线程简单测试

    vtkMultithreader is a class that provides support for multithreaded execution using sproc() on an SG ...

  2. 现代软件工程作业 github使用

    Github使用 版本库的创建与同步 第一步:创建远程版本库并同步到本地 创建远程版本库 在地址栏输入www.github.com 并sign in 进入到个人主页,如下图示: 创建远程版本库:点击N ...

  3. 用Model-View-ViewModel构建iOS App

    如果你已经开发一段时间的iOS应用,你一定听说过Model-View-Controller,即MVC.MVC是构建iOS App的标准模式.然而,最近我已经越来越厌倦MVC的一些缺点.在本文,我将重温 ...

  4. string.Format格式化用法详解

    1.格式化货币(跟系统的环境有关,中文系统默认格式化人民币,英文系统格式化美元) string.Format("{0:C}",0.2) 结果为:￥0.20 (英文操作系统结果:$0 ...

  5. 第3月第23天 EAIntroView

    1. EAIntroView,界面和模型分离.EAIntroPage数据模型,EAIntroView界面. https://github.com/ealeksandrov/EAIntroView

  6. Qt &QSS

    Today task:解决了qt中的一些控件无法使用qss的问题(如QProgressDialog 调节chunk的颜色,QMessageBox按钮的颜色问题)1,对于QMessageBox,可以单独 ...

  7. js的DOM的方法和属性总结

    1.DOM的获取元素document.getElementById()context.getElementsByTagName(tag) (可以获取相应上下文环境所有的tag标签)context.ge ...

  8. applicationContext.xml的基本配置文件

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  9. MFC双缓存技术代码

    屏蔽背景刷新,在View中添加对WM_ERASEBKGND的响应,直接返回TRUE: BOOL CTEMV1View::OnEraseBkgnd(CDC* pDC) { // TODO: 在此添加消息 ...

  10. angularJS 服务-$provide里factory、service方法

    当你初试 Angular 时,很自然地就会往 controller 和 scope 里堆满不必要的逻辑.一定要早点意识到,controller 这一层应该很薄:也就是说,应用里大部分的业务逻辑和持久化 ...