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. Hive metastore三种配置方式

    http://blog.csdn.net/reesun/article/details/8556078 Hive的meta数据支持以下三种存储方式,其中两种属于本地存储,一种为远端存储.远端存储比较适 ...

  2. How to build .apk file from command line（转）

    How to build .apk file from command line Created on Wednesday, 29 June 2011 14:32 If you don’t want ...

  3. 第4月第1天 makefile automake

    1. gnu make的函数调用是$,比如 $(subst ee,EE,feet on the street) 规则中“TARGETS”可以是空格分开的多个文件名 a all: echo $(subs ...

  4. C和指针 第十五章 文件I/O

    stdio.h中包含了声明FILE结构 struct _iobuf { char *_ptr; //文件输入的下一个位置 int _cnt; //当前缓冲区的相对位置 char *_base; //指 ...

  5. &&&&数组去重方法总结&&&&&

    [数组去重]本文一共总结了5种方法: //方法一:sort方法 var ary = [1, 4, 2, 3, 1, 2, 2, 3, 3, 2, 5, 2, 1, 2];Array.prototype ...

  6. 前端构建工具的用法—grunt、gulp、browserify、webpack

    随着前端项目的飞速发展,项目越来越大.文件越来越多,前端工程化的工具也越来越多.下面介绍目前最流行的四种构建工具——grunt.gulp.browserify.webpack 所有的构建工具都是基于N ...

  7. HTTP的客户端识别与cookie机制

    本文是<HTTP权威指南>的读书笔记 Web服务器可能同时在与数千个客户端同时进行会话,服务器需要记录下它们在与谁交谈,而不是认为所有的请求都来自于匿名客户端.在HTTP中可以有以下几种方 ...

  8. JavaScript生成新标签的三个方法（摘抄自留）

    <div id="d1"></div> <script> //HTML function a(){ document.getElementByI ...

  9. 耿丹CS16-2班助教总结

    Deadline: 2016-1-7 11:59pm 开篇有言 --又是一年末,不似风光,却添风霜,顶霾前进,踽踽独行,可乎? 助教那些事儿 助教这份工作是之前就担任过的,很羞愧,当时才担任了几天就撒 ...

  10. 数据库（Database）

    一.定义 1. 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,简单来说是本身可视为电子化的件柜--存储电子文件的处所,用户可以对文件中的数据进行新增.截取.更新.删除等操作.数 ...