先来一张图：

测试代码：

<!DOCTYPE html>

<html>

<head>

    <style>

        #bb {

            overflow: hidden;

            background-color: gray;

        }

        #bb .f1 {

            font-size: 180px;

            background-color: yellow;

        }

        #bb .f2 {

            font-size: 340px;

            background-color: yellow;

        }

        #bb > div {

            display: table-cell;

        }

        #bb span {

        }

    </style>

  </head>

<body>

    <div id="bb">

        <div>

            <span class="f1">fff</span>

        </div>

        <div>

            <span class="f2">fffff</span>

        </div>

    </div>

</body>

</html>

效果如下：

div和span上下是有空隙的这个空隙就是行间距。

改变代码以后，使用display:inline-block之后呢？

#bb span {

            display: inline-block;

        }

span和div中间没有空隙了，但是行间距依然存在，不过这回行间距在span元素里面了，span的高度变成了388px，和外层div高度一样。

原因应该是inline-block的line-height撑开了他。

display:inline和display:inline-block的区别的更多相关文章

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

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

  2. 区别CSS中display：box；inline；none以及HTML中 <frame> 标签<table> 标签的 frame 属性

    区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内 ...

  3. css学习--inline-block详解及dispaly:inline inline-block block 三者区别精要概括

    *知识储备: 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行. 块级元素:是可以控制宽和高.margin等,并且会换行. 1.inline-block 详解 (1)一句话就是在 ...

  4. js style.display = "" 和style.display="none" 区别

    style.display = "":是清除display样式,display将使用默认值(块元素会变成block,内联元素会变成inline)style.display=&quo ...

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

    display:box我想大家很熟悉,那么display:inline-box呢,今天在项目中需要设置这样的属性box-align:center,那么就想到用 display:box;如果设置BOX, ...

  6. CSS3 display:flex和display:box有什么区别？

    **区别**,仅是各阶段草案命名.- W3C 2009年第1次草案:[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723 ...

  7. display:box；display:flex；弹性盒模型

    display:box:display:flex:弹性盒模型 非常适用于移动端.PC端高级浏览器,效果也很好. display: -webkit-box; display: -moz-box; dis ...

  8. display:flex和display:box布局浏览器兼容性分析

    display:flex和display:box都可用于弹性布局,不同的是display:box是2009年的命名,已经过时,用的时候需要加上前缀:display:flex是2012年之后的命名.在实 ...

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

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

  10. display:inline与display:block——行内元素显示与块级元素显示

    display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认displa ...

随机推荐

  1. javascript 实现jsonp

    jsonp原理其实也简单,虽然ajax不能跨域,但是通过src这个属性我们可以实现跨域,其实和我们引入第三方jquery调用它的方法一样的. html: <!DOCTYPE html> & ...

  2. RAC的负载均衡有2种方式

    RAC的负载均衡有2种方式1:数据库服务器端 设置remote_listener2: 客户端tns配置 一般连接串这么写:ess_hb_i1=  (DESCRIPTION =    (ADDRESS ...

  3. 实现类似QQ的折叠效果

    //  主要核心是点击自定义header来展开和收起每一组里面的cell,模型里面应该有isShow此属性来记录开展还是收起. //  ViewController.m//  实现类似QQ的折叠效果/ ...

  4. iOS_SN_CoreData(二)

    上一篇是讲怎么进行CoreData的基本操作,这一篇是讲NSFetchedResultsController得到CoreData数据怎么与tableView完美结合,和动画操作的实现. NSFetch ...

  5. QT-Demo-Colck-01

    QT += widgets QT += core HEADERS += \ mainwindow.h SOURCES += \ mainwindow.cpp \ main.cpp #ifndef MA ...

  6. POJ3641 Pseudoprime numbers(快速幂+素数判断)

    POJ3641 Pseudoprime numbers p是Pseudoprime numbers的条件: p是合数,(p^a)%p=a;所以首先要进行素数判断,再快速幂. 此题是大白P122 Car ...

  7. Sicily 2005.Lovely Number

    题目地址:2005.Lovely Number 思路: 若测试数据出现的次数为奇数,则输出它. 所以,可以先排序,若前后相等,前后都设为0,最后不为0的则可以输出. 具体代码如下: #include ...

  8. jQuery源码分析1

    写在开头: 昨天开始,我决定要认真的看看jQuery的源码,选择1.7.2,源于公司用的这个版本.由于源码比较长,这将会是一个比较持久的过程,我将要利用业余时间,和偶尔上班不算忙的时间来进行.其实原本 ...

  9. JS模拟键盘事件 -- 原理及小例子

    提问: 键盘默认事件,比如tab切换,alt+f4关闭,ctrl+t新建等,如果不想通过键盘而是一些按钮点击来触发这些功能,该咋办呢? 例子: 先以tab为例上一个小例子: <!DOCTYPE ...

  10. 窗口过程 - Windows程序设计（SDK）006

    窗口过程 让编程改变世界 Change the world by program 内容节选: Windows 把这样一个窗口分为了客户区和非客户区,这里边白色的这一大片就是客户区,而这些标题栏.菜单栏 ...