取消“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. Porting from Oracle to MySQL

    A potential customer asked my about porting her application from Oracle Database to MySQL. I always ...

  2. java.lang.AbstractMethodError: org.apache.xerces.dom.DocumentImpl.getXmlStandalone()Z解决办法

    2019-05-20 23:02:20.168 |-INFO  [http-nio-8001-exec-2] com.xxx.ecc.cloudbiz.service.payment.impl.Wei ...

  3. 【待解决】An internal error occurred during: "Launching baiduTest1". java.lang.NullPointerException

    编写的一个Java类,以junit运行可以正常执行,以testNG执行就报如下错误 解决方法:

  4. 杂项:DS(目录服务)

    ylbtech-杂项:DS(目录服务) 1.返回顶部 1. DS(目录服务). 目录服务管理概述: 目录服务是扩展计算机系统中最重要的组件之一.虽然用户和管理通常不知道他们感兴趣对象的确切名称,但他们 ...

  5. Nginx实战系列之功能篇----后端节点健康检查

    目前,nginx对后端节点健康检查的方式主要有3种,这里列出:   1.ngx_http_proxy_module 模块和ngx_http_upstream_module模块(自带)    官网地址: ...

  6. Juniper路由器

    Juniper路由器入门之一:需要子接口的端口配置 set interfaces fe-2/0/1 vlan-tagging              ――――在配置接口启用封装VLAN set in ...

  7. windows下flink示例程序的执行

    1.什么是flink Apache Flink® - Stateful Computations over Data Streams 2.启动 下载地址  我下载了1.7.2 版本  解压到本地文件目 ...

  8. 修改Myeclipse中项目在tomcat上发布的名称

    1.从网上找的,但是没有用 2.直接修改工作空间中的文件

  9. CSS简单入门

    - Java攻城狮学习路线 - 一. 什么是CSS CSS指层叠样式表(Cascading Style Sheets),定义如何显示HTML元素 二. CSS语法 /* 选择器 { 声明: 声明:}* ...

  10. RN打包的那些坑儿

    Write By lz: Lz 寄语: RN虐我千百遍, 我待RN如初恋, 坑儿爬多了也就自然了 官方文档: http://reactnative.cn/docs/0.43/signed-apk-an ...