（百科：

在CSS布局中，如果我们想要将一些元素在同一行显示，其中的一种方法就是把要同行显示的元素设置display属性为inline-block，但是你会发现这些同行显示的inline-block元素之间经常会出现一定的空隙，这就是“换行符/空格间隙问题”。

display：inline；强制变成行内元素

display：block；强制变成块元素

而display：inline-block；顾名思义就是行内块的意思了，他具备了行内元素不换行的特征，同时也有块元素可以设置宽高的特征）

  • 移除空格
  • 使用margin负值
  • 使用font-size：0
  • letter-spacing
  • word-spacing

eg，

<html>
    <head>
      <title>display:inline-block元素之间空隙的产生原因和解决办法</title>
      <style type="text/css">
          .parent .child {
          display: inline-block;
          background-color: #fdfd04;
          width: 100px;
          height: 100px;
        }
        .pst1{
            margin-left: -5px;
        }
      </style>
    </head>
    <body>
      <div class="parent">
        <div class="child">child1</div>
        <div class="child pst1">child2</div>
      </div>
    </body>
   </html>

511,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. vmware运行ubuntu虚拟机出现诡异的鼠标闪烁

    正在开心的写着AC自动机,突然发现鼠标消失了. 习惯性地动动鼠标,却还是没有反应,停止移动鼠标后鼠标却显现了出来??(吃惊.gif 在加载软件的时候,就算鼠标停止也会闪烁(其实这个虚拟机以前加载也会闪 ...

  2. python接口自动化之fiddler使用（二）

    1.快捷设置,自定义会话框,查看get和post请求 (1)鼠标放在#后面,右键 (2)选择Customize columns (3)选择Miscellaneous (4)选择RequestMetho ...

  3. php对数组排序 关联数组功能比较

    用php在国家统计局中抓取 省市区县 代码.名称.排序order id,处理方式是通过curl请求网址,正则匹配 获取信息,并保存为json文件,以便后期读取文件. 过程中或遇到对json文件转化为数 ...

  4. C++-指针阅读能力提升

    下面的标识符你肯定在工程中看不到,但是在面试题中却非常常见,掌握掌握还是不错的. int (*p1)(int*, int (*f)(int*));              int (*p2[5])( ...

  5. SpringCloud Netflix Feign

    调用其它机器上的服务(远程调用)有2种技术:REST.RPC. REST 注入RestTempalte,服务提供者的url要写成RESTful风格,在url中传递参数. 如果参数很多,url会有一长串 ...

  6. c#中convert.toInt32和int.parse()和强制类型转换的区别

    string a="123"; int i=(int)a; 这是会出现错误因为:强制类型转换只能转换值类型不能转换引用类型 string属于引用类型    强制类型转换时如果值类型 ...

  7. ASP.NET + MVC5 入门完整教程七 -—-- MVC基本工具（下）

    https://blog.csdn.net/qq_21419015/article/details/80493633 Visual Stdio 的单元测试

  8. 「模板」Splay

    代码说明 对于一些变量进行说明: 变量名 说明 rt 树根 ff[u] 点 \(u\) 的父节点,特别地, ff[rt]=0 ch[u][0|1] 点 \(u\) 的 左/右儿子 siz[u] 点 \ ...

  9. python 批量编译 批量删除

    把项目的py文件变异成pyc文件,好处是可以保护源码不泄露. 假如一个工程文件夹有1000个py文件,这个时候怎样快速处理 ? 两步走: ①  py--->pyc python -m compi ...

  10. Strategic game(无向?)二分图最小点覆盖(Poj1463,Uva1292)

    原题链接 此题求二分图的最小点覆盖,数值上等于该二分图的最大匹配.得知此结论可以将图染色,建有向图,然后跑匈牙利/网络流,如下.然而... #include<iostream> #incl ...