先写出代码

核心css代码:

.sample0{display: inline-block;height: 40px;width: 40px;color: #ffffff;background-color: red; text-align: center;font-size: 26px;}

.sample1{display: inline-block;height: 40px;width: 40px;color: #ffffff;background-color: orange;text-align: center;font-size: 26px;

.sample2{display: inline-block;height: 40px;width: 40px;color: #ffffff;background-color: blue;text-align: center;font-size: 26px;}

核心html代码：

<div class="sample0">0</div>

<div class="sample1">1</div>

<div class="sample2">2</div>

问题： display:inline-block的块之间，有空隙

原因：换行显示或空格分隔

解决方案一：margin 设置负值

核心 css 代码

.sample0{display: inline-block;height: 40px;width: 40px;color: #ffffff;background-color: red; text-align: center;font-size: 26px;margin-right: -4px;}

.sample1{display: inline-block;height: 40px;width: 40px;color: #ffffff;background-color: orange;text-align: center;font-size: 26px;margin: 0;margin:0 -4px;}

.sample2{display: inline-block;height: 40px;width: 40px;color: #ffffff;background-color: blue;text-align: center;font-size: 26px;margin-left: -4px;}

解决方案二： 将html元素写紧凑（消除空格）

核心 html 代码

<div class="sample0">0</div><div class="sample1">1</div><div class="sample2">2</div>

display:inline-block 去除间隙的更多相关文章

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

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

  2. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...

  3. display:inline; display:block;

    block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...

  4. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  5. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

  6. 理解display:inline、block、inline-block

    要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...

  7. display:inline 跟 display:block 跟 display:inline-block区别

    我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...

  8. HTML5 display:inline、block、inline-block的区别--备用

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  9. display:inline、block、inline-block的区别(转)

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  10. display:inline,display:inline-block,display:block 区别

    之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...

随机推荐

  1. [转]HTML5 本地图片预览

    [原文链接] https://www.huangwenchao.com.cn/2015/03/html5-image-preview.html 问题 加入我们在 HTML 里面有一个图片上传控件: & ...

  2. When using SqlDependency without providing an options value, SqlDependency.Start() must be called prior to execution of a command added to the SqlDependency instance.

    在调试SignalR程序时,提示一个异常:When using SqlDependency without providing an options value, SqlDependency.Star ...

  3. lua的string.gsub初使用

    今天在学习lua,熟悉项目代码的过程中,发现string.gsub好高级,所以在此mark下. 以下是lua5.1的官方文档介绍. string.gsub (s, pattern, repl [, n ...

  4. JsonConvert 使用注意事项之 Serializable

    1.使用NuGet安装Newtonsoft.Json. 2.创建需要序列化的类. public class Person { public string Name{get;set;} public i ...

  5. 点击显示div

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Exception raised during rendering: java.lang.System.arraycopy([CI[CII)V

    最近下载一个新版本的adt-bundle,Android API是20. 把Plain Text控件往布局上面拖时,发现拖不上去,出现了下面的错误: Exception raised during r ...

  7. mysql笔记第三天

    一下午在学习mysql,最有价值的就是这一点点 Order by 可以对在select字句中出现的字段位置进行排列eg:select name,count(*) from eg group by na ...

  8. 2016年湖南省第十二届大学生计算机程序设计竞赛Problem A 2016 找规律归类

    Problem A: 2016 Time Limit: 5 Sec  Memory Limit: 128 MB Description  给出正整数 n 和 m,统计满足以下条件的正整数对 (a,b) ...

  9. Python私有变量

    # 访问限制的保护,代码更加健壮 class Student(object): def __init__(self,name,score): self.__name= name self.__scor ...

  10. webapi的返回类型，webapi返回图片

    1.0 首先是返回常用的系统类型,当然这些返回方式不常用到.如:int,string,list,array等.这些类型直接返回即可. public List<string> Get() { ...