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. 关于编写性能高效的javascript事件的技术

    如何能做出高效的web前端程序是我每次做前端开发都会不自觉去考虑的问题.几年前雅虎里牛逼的前端工程师们出了一本关于提升web前端性能的书籍,轰动了整个web开发技术界,让神秘的web前端优化问题成为了 ...

  2. Java程序员笔试、面试题目

    1. 面向对象编程的三大特性是什么,请简要阐述 2. String 和StringBuffer的区别 3. 说出ArrayList,Vector, LinkedList的存储性能和特性 4. Coll ...

  3. DataGrid控件使用

    应用Binding显示后台数据 <UserControl x:Class="demo03.View.UserInfoList"             xmlns=" ...

  4. 记录vmware虚拟机安装的时候一些注意

    1.选择从哪里安装操作系统的时候,要选择第三项过一会安装,不要选择第一项. 2.点击开始三角形的时候,选择中文安装或者英文安装,但键盘布局要选择USA,美国. 3.安装vmwaretools的时候,执 ...

  5. window.event.srcElement与window.event.target 触发事件的元素

    IE浏览器支持window.event.srcElement , 而firefox支持window.event.target:<input type="text" onblu ...

  6. 纯CSS 图片演示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  7. 查询EBS中LOV的SQL语句

    1.帮助->关于:查找会话 SID : 507: 2.点一下LOV右边的三点,触发LOV事件: 3.运行如下代码段: DECLARE  l_sid NUMBER := :SID;BEGIN  F ...

  8. 测试基础：Bug管理那些事_20160910

    1.bug由来 虫子爬进主机引起继电器短路,导致机器故障.真正的缺陷是:主机散热孔少装了块金属丝,这样才能防止虫子爬到主机. 2.什么是bug? bug是缺陷的一种表现形式,而一个缺陷是可以引发多种b ...

  9. [原创]CSS3打造动态3D气球

    周末在江边晨跑的时候发现很多 当时心血来潮就想,应该可以在网页中实现一下 这几天得闲就做了一下,效果如下 (尽量在最新版本的chrome或者firefox中查看) demo下载在文章最后 预览 --& ...

  10. js作用域之常见笔试题，运行结果题

    笔试题中经常有运行结果题,而大多体型都是围绕作用域展开,下面总结了几种相关的题: 外层的变量函数内部可以找到,函数内部的变量(局部变量)外层找不到. function aaa() { var a = ...