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. [慢查优化]建索引时注意字段选择性 & 范围查询注意组合索引的字段顺序

    文章转自:http://www.cnblogs.com/zhengyun_ustc/p/slowquery2.html 写在前面的话: 之前曾说过"不要求每个人一定理解 联表查询(join/ ...

  2. svn: E200007: Runner for 'org.tmatesoft.svn.core.wc2.SvnMerge' command have not been found; probably not yet implement in this API.

    myeclipse分支合并主干(分支->team->合并->选择主干)的时候出现这个错误: svn: E200007: Runner for 'org.tmatesoft.svn.c ...

  3. 图解TCP/IP→第2章基础知识

    ####TCP.IP背景**关键词:ARPANET,UNIX,分组交换技术,*ARPANET(阿帕网),也是全球互联网的鼻祖.阿帕网的成功也充分证明了基于分组交换技术的通信方法的可行性.*20世纪70 ...

  4. RN8209校正软件开发心得（1）

    最近领导突然让我做软件了,头大啊.以前也没怎么自己独立做过软件,这次来的突然啊,面对这么大的任务量自己只能加把劲了,还等着领导给涨工资呢,哈哈... 作为编程的小白,要自己做一款上位机的软件实属不易啊 ...

  5. Linux查找命令

    最近,我在学习Linux,下面是一些笔记. 使用电脑的时候,经常需要查找文件. 在Linux中,有很多方法可以做到这一点.国外网站LinuxHaxor总结了五条命令,你可以看看自己知道几条.大多数程序 ...

  6. iOS动态部署之RSA加密传输Patch补丁

    概要:这一篇博客主要说明下iOS客户端动态部署方案中,patch(补丁)是如何比较安全的加载到客户端中. 在整个过程中,需要使用RSA来加密(你可以选择其它的非对称加密算法),MD5来做校验(同样,你 ...

  7. 国内github访问慢的解决方法

    本文是windows处理方法,macos方法也差不多. 一般Github的访问有两部分:主站的访问和二级域名的资源加载(比如样式文件等) 一般Github加载缓慢,主要是 assets-cdn.git ...

  8. php数组array_push()和array_pop()以及array_shift()函数

    <?php /** * array_push()将一个或多个单元压入数组的末尾(入栈) */ $stack = array("Java", "Php", ...

  9. Yii ActiveRecord 的via和viaTable示例

    Yii中,将两个不相关的表利用中间表关联有via和viaTable两种方法,这里通过用户权限查询来进行示例. 关系如上,需要建立三个表 用户表 权限表 用户表 数据: 权限表 数据: 关联表 数据: ...

  10. json格式化工具

    1.JsonViewer 可对json数据进行查看.格式化.编辑...... 2.在线工具 http://json.parser.online.fr/