先写出代码

核心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. Entity Famework 的通过IOC注入实现

    1. 前言 最近刚换了一家公司,由于之前的公司代码并没有用到项目框架,需要我整理下NHibernate与Entity Framework之间的区别及适用性.并写出相关的示例代码 面试的时候吹的牛,得把 ...

  2. jquery属性选择器（同时匹配多个条件）

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

  3. 点击div折叠

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta cont ...

  4. 【Java每日一题】20161122

    package Nov2016; import java.util.ArrayList; import java.util.Iterator; public class Ques1122 { publ ...

  5. Thinkphp 用PHPExcel 导入Excel

    搞了个简单的Excel导入, 用的是PHPExcel(百科:用来操作Office Excel文档的一个PHP类库, 基于微软的OpenXML标准和PHP语言) 好, 不说了, 开始吧... 首先得有P ...

  6. 第 27 章 CSS 传统布局[上]

    学习要点: 1.布局模型 2.表格布局 3.浮动布局 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 早期所使用的传统布局,很多情况下,这些布局方式还是非常有用的. 一．布局模型 在早期没有平 ...

  7. 自学H5第二天

    笔记: 1.css之外联样式 2.css之行间样式: 3.css之内联样式 二.边框的知识: 1.边框的复合样式: 2.边框的单一样式: /*单一样式*/ border-width: 1px 2px ...

  8. python 函数小实例

    1.判断一个数字是否为素数: import math # -----------------判断一个数是否是素数------------------ def sushu(a): i=1 for i i ...

  9. winform 固定splitContainer某一部分大小

    处于布局省事考虑,通常会用splitcontainer进行总体的布局,例如: 默认情况下,splitcontainer在运行时会根据上下文自动调整每个panel的大小,但大部分情况下,其实我们希望左边 ...

  10. linux下使用taskset设置进程cpu绑定不起作用

    自从大规模使用了虚拟化之后,大流量时soft interrupt在某个cpu很高就是个严重的问题,最近一有时间就研究这个问题,如果网卡本身不支持多队列的话,有没有办法缓解这个问题. 一开始使用rps, ...