取消“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日志格式 binlog_format

    MySQL 5.5 中对于二进制日志 (binlog) 有 3 种不同的格式可选:Mixed,Statement,Row,默认格式是 Statement.总结一下这三种格式日志的优缺点. MySQL ...

  2. HDU多校赛第9场 HDU 4965Fast Matrix Calculation【矩阵运算+数学小知识】

    难度上.,,确实...不算难 问题是有个矩阵运算的优化 题目是说给个N*K的矩阵A给个K*N的矩阵B(1<=N<=1000 && 1=<K<=6),先把他们乘起 ...

  3. Project Euler18题 从上往下邻接和

    题目:By starting at the top of the triangle below and moving to adjacent numbers on the row below, the ...

  4. Android 安装应用后点击打开带来的问题

    今天安装完APP的时候.界面会显示两个button,一个完毕键,一个打开键,点击Open键之后,外部打开应用.此时,我们点击HOME键.程序将会在后台. 然后再点击该桌面上应用程序的图标,app会自己 ...

  5. 数据挖掘十大经典算法--CART: 分类与回归树

    一.决策树的类型  在数据挖掘中,决策树主要有两种类型: 分类树 的输出是样本的类标. 回归树 的输出是一个实数 (比如房子的价格,病人呆在医院的时间等). 术语分类和回归树 (CART) 包括了上述 ...

  6. 0x61 最短路

    终于会dij了原来我以前写的也是堆优化spfa-_-! poj3662DP 通过spfa来放缩(可怜我去年NOIP的day1t3啊) #include<cstdio> #include&l ...

  7. ubantu下NiFi单节点安装部署

    第一步,首先下载安装包:http://nifi.apache.org/download.html,博主下载的是1.4.0版本,直接下载的是编译后的文件. 第二步:将压缩包上传到服务器相应目录下,并且解 ...

  8. caffe 参数介绍 solver.prototxt

    转载自 http://blog.csdn.net/cyh_24/article/details/51537709 solver.prototxt net: "models/bvlc_alex ...

  9. MongoDB: The Definitive Guide

    第一章 简介 MongoDB是面向文档的数据库,不是关系型数据库.内置对MapReduce的支持,以及对地理空间索引的支持. 丰富的数据模型 容易扩展,它所采用的面向文档的数据模型可以使其在多台服务器 ...

  10. how does Array.prototype.slice.call() work?

    763 down vote accepted +50 What happens under the hood is that when .slice() is called normally, thi ...