（百科：

在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. MongoDB geonear和文本命令驱动程序2.0

    文本查询,q作为查询字符串: coll.FindAsync<Foo>(Builders<Foo>.Filter.Text(q)); 文本查询需要一个文本索引.要从C#创建代码, ...

  2. nginx proxy_set_header Host $host 和 proxy_set_header Host $http_host 的作用对比

    转载自https://www.jianshu.com/p/7a8a7eb3707a 1.浏览器直接访问服务,获取到的 Host 包含浏览器请求的 IP 和端口 测试服务器,centos 7 sudo ...

  3. 多项式乘法逆元 - NTT

    递归求解即可 #include <bits/stdc++.h> using namespace std; #define int long long namespace NTT { #de ...

  4. keepalived高可用工具

    1.准备俩台虚拟机,一台主机,一台备机 我这里模拟的是 主机ip: 192.168.42.66 masternginx 备机ip: 192.168.42.77 slavenginx 虚拟ip: 192 ...

  5. django css文件导入，模板继承

    今天写了一下模板继承 刚开始感觉还行,也挺简单的 当只有html的时候还是能继承到的,代码如下.首先在父html文件里加入 {% block content %} {% block extracss ...

  6. Java安装及环境配置

    一.jdk安装及环境配置 1. 下载jdk 去oracle官网下载,这里使用的jdk版本为 有一个需要注意的问题就是7u71后的jdk有两个版本,奇数版本为无BUG版,偶数版包含奇数版全部内容但是有一 ...

  7. python面试的100题（12）

    25.求出列表所有奇数并构造新列表 a=[1,2,3,4,5,6,7,8,9,10] res=[i for i in a if i%2==1] print(res) 结果为:[1, 3, 5, 7, ...

  8. mongodb多字段去重

    单字段去重 db.student.distinct("name"); 多字段去重 db.student.aggregate([{      $group:{            ...

  9. echo -e 实现color output

    拓展: cp  简化: c'p  -rv   /data/project/test {.txt,_bak.txt}

  10. C变量常量

    变量是指其值可以变化的量.计算机中,指令代码.数据都存储于内存中.变量也需要存储在内存中.在计算机中,每个变量都被分配了一块内存空间,在这些空间里存储的就是变量的值.变量之所以可以变化,就是这个存储空 ...