取消“display:inline-block 相邻元素间有4px的空白间距”

Demo:http://jsfiddle.net/JSDavi/p6gcx6nx/

例子:

<div sytle="display:inline-block; width:25%;background-color:blue;">aaaaaa</div>

<div sytle="display:inline-block; width:50%;background-color:red;">bbbbbb</div>

<div sytle="display:inline-block; width:25%;background-color:green;">ccccccc</div>

解决方案:

1、清除(inline-block)元素“</div>”和“<div>”的空白,

即上一元素的结束标签和下一元素的开始标签中不能出现空格、换行、内容,

只可能是注释;

2、对inline-block的父元素添加font-size:0;,对inline-block元素及兄弟元素各自设置font-size大小;

3、去掉display:inline-block,或改为display:block,并添加float:left;

CSS - display:inline-block 相邻元素间有4px的空白间距的更多相关文章

  1. CSS——display(Block none inline等)属性的用法

    在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...

  2. CSS display:inline-block的元素特点:

    将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格. 在CSS中,块级对象元素会单独占一行显示,多个block元素会各自新起一行,并且可以设置width,h ...

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

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

  4. CSS display:inline和float:left两者区别探讨

     本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有 ...

  5. [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 ...

  6. 用Scala实现集合中相邻元素间的差值

    欢迎转载,转载请注明出处,徽沪一郎. 概要 代码这东西,不写肯定不行,新学Scala不久,将实际遇到的一些问题记录下来,日后也好查找. 今天讲的是如何计算同一集合中元素两两之间的差值,即求开始集合(a ...

  7. css 给inline和inline-block元素设置margin和padding

    经过简单的测试,行内元素或者行内块元素的maring-left,margin-right,padding-left,padding-right都是可以正常表现的,下面来看一下剩下的margin-top ...

  8. css display:inline

  9. DIV CSS display(block,inline,none)的属性教程

    display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...

随机推荐

  1. [MySQL]--查询性能分析工具-explain关键字

    explain显示了MySQL如何使用索引来处理select语句以及连接表.可以帮助选择更好的索引和写出更优化的查询语句. explain的使用方法很简单,只需要在select查询语句前面加上expl ...

  2. mongodb--游标与链式查找

    一:游标 [能不用游标的地方就不要用游标,它是占用数据库资源的] find操作是返回一个游标,为了方便我们查看结果,mongodb shell会自动迭代结果.[游标也是递增的] 2.迭代结果的两种方式 ...

  3. asp.net--webconfg指南

    原文链接 花了点时间整理了一下ASP.NET Web.config配置文件的基本使用方法.很适合新手参看,由于Web.config在使用很灵活,可以自定义一些节点.所以这里只介绍一些比较常用的节点. ...

  4. 项目 cmdb(一)

    Django之ModelForm组件 ModelForm    a.  class Meta:            model,                           # 对应Mode ...

  5. Marching squares &amp; Marching cubes

    提要 Marching squares 主要是用于从一个地图(用二维数组表示)生成轮廓的算法.Marching cubes则相应的是在空间生成网格的方法.最常见的应用就是天气预报中气压图的生成.还经常 ...

  6. 例说linux内核与应用数据通信(三):读写内核设备驱动文件

    [版权声明:尊重原创,转载请保留出处:blog.csdn.net/shallnet.文章仅供学习交流.请勿用于商业用途]         读写设备文件也就是调用系统调用read()和write(),系 ...

  7. js 判断 wifi and 流量

    var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection || { ...

  8. 状态压缩dp poj 3254 hdu5045

    近来感觉状态压缩dp的强大性(灵活利用了二进制运算非常关键). . . 于是做了俩提来看看..毕竟队友是专业的dp.我仅仅是管中窥豹下而已.. 日后有机会再与之玩耍玩耍...ps:假设上天再给我一次机 ...

  9. [2-SAT] poj 3207 Ikki&#39;s Story IV - Panda&#39;s Trick

    题目链接: id=3207">http://poj.org/problem? id=3207 Ikki's Story IV - Panda's Trick Time Limit: 1 ...

  10. Ajax的两种实现方式

    //ajax的jquery实现 function aclick(){//alert("測试一");var name = $("#userName").val() ...