取消“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. ElasticSearch中profile API的使用

    1. 前言 profile API 是 Elasticsearch 5.x 的一个新接口.通过这个功能,可以看到一个搜索聚合请求,是如何拆分成底层的 Lucene 请求,并且显示每部分的耗时情况. 2 ...

  2. POJ 1175

    //本来写了个和1021相同的HASH,但没过,于是,抱着侥幸的心理,把它变成距离的四次方, //我就呵呵了... //这个题,完全靠概率.当然了,如果是把图翻转来比较,也是可以的.但好像很麻烦.. ...

  3. With Storm Spouts, when is declareOutputFields( ) called?

    The method IComponent.declareOutputFields(...) is called on the client machine when the client code ...

  4. Cache 总结

    这一文,让我们分析一下,<浅谈 Cache> 一文中的奇怪现象,事实上如今来看也并不奇怪了.         在什么情况下 r1 和 r2 都为 0 呢?         细致看代码,你会 ...

  5. C++一些知识难点

    什么是"引用"?申明和使用"引用"要注意哪些问题? 答:引用就是某个目标变量的"别名"(alias).相应用的操作与对变量直接操作效果全然同 ...

  6. 手游server之数据IO进化

    这里数据IO是指游戏数据存盘和读取. 假设IO处理不好.server在IO时会导致.游戏卡顿较长的时间,严重影响游戏体验. 近期服务端刚好对IO这一块做了优化,把优化过程记录一下. 一 原始版 刚開始 ...

  7. luogu1313 计算系数

    题目大意:给定一个多项式(ax+by)^k,请求出多项式展开后x^n*y^m 项的系数. 将原式化为(ax+by)*(ax+by)*...①,然后将其拆解,拆解时x乘了多少次,a就乘了多少次,y,b同 ...

  8. ELK+kafka日志收集

    一.服务器信息   版本 部署服务器 用途 备注 JDK jdk1.8.0_102 使用ELK5的服务器 Logstash 5.1.1 安装Tomcat的服务器 发送日志 Kafka降插件版本 Log ...

  9. [JXOI 2018] 守卫 解题报告 (DP)

    interlinkage: https://www.luogu.org/problemnew/show/P4563 description: solution: 注意到对于范围$[l,r]$,$r$这 ...

  10. 21. Merge Two Sorted Lists[E]合并两个有序链表

    题目 Merge two sorted linked lists and return it as a new list. The new list should be made by splicin ...