取消“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. Timus - 1213 - Cockroaches!

    先上题目: 1213. Cockroaches! Time limit: 1.0 secondMemory limit: 64 MB It's well-known that the most ten ...

  2. UVA The Tower of Babylon

    The Tower of Babylon Perhaps you have heard of the legend of the Tower of Babylon. Nowadays many det ...

  3. caffe中ConvolutionLayer的前向和反向传播解析及源码阅读

    一.前向传播 在caffe中,卷积层做卷积的过程被转化成了由卷积核的参数组成的权重矩阵weights(简记为W)和feature map中的元素组成的输入矩阵(简记为Cin)的矩阵乘积W * Cin. ...

  4. 阶梯博弈&POJ 1704

    阶梯博弈: 先借用别人的一幅图片.(1阶梯之前还有一个0阶梯未画出) 阶梯博弈的最初定义是这样的:每一个阶梯只能向它的前一个阶梯移动本阶梯的点,直至最后无法移动的为输. 那么,利用NIM,只计算奇数级 ...

  5. requireJS文件夹

    前言 对于像我这样的requireJS刚開始学习的人而言,requireJS最难理解的部分应该是它的路径问题.晚上随便折腾了一下,算是略微理清了这个文件夹问题吧. requireJS学习网址:requ ...

  6. 【j2ee spring】44、巴巴运动网前台产品显示

    [j2ee spring]44.巴巴运动网前台产品显示 项目结构 项目代码 界面显示 <%@ page language="java" isELIgnored="f ...

  7. 齐头并进完成任务——Java多线程(一)

    多线程(Multithread)指的是在单个进程中同时运行多个不同的线程,执行不同的任务.多线程意味着一个程序的多行语句块并发执行. 一.实现多线程 1.通过继承Thread类实现多线程. Threa ...

  8. 样条函数(spline function)—— 分段多项式函数(piecewise polynomial function)

    1. 分段多项式函数 样条函数是某种意义上的分段函数. Spline (mathematics) - Wikipedia 最简单的样条函数是一种分段多项式函数(piecewise polynomial ...

  9. libhiredis.so.0.13 => not found 缺少

    wget https://github.com/redis/hiredis/archive/v0.13.3.tar.gz tar -xzvf v0.13.3.tar.gz cd hiredis- ma ...

  10. 几款jQuery右键菜单插件介绍

    在网页中使用自定义右键菜单,实现上皆为使用javascript禁用浏览器默认的右键菜单,然后在网页中响应鼠标右键事件,弹出自定义的菜单. 类似右键菜单的组件网上很多.一般而言,改变浏览器的默认菜单应当 ...