先来一张图：

测试代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5.     <style>
  6.         #bb {
  7.             overflow: hidden;
  8.             background-color: gray;
  9.         }
  10.         #bb .f1 {
  11.             font-size: 180px;
  12.             background-color: yellow;
  13.         }
  14.         #bb .f2 {
  15.             font-size: 340px;
  16.             background-color: yellow;
  17.         }
  18.         #bb > div {
  19.             display: table-cell;
  20.         }
  21.         #bb span {
  22.  
  23.         }
  24.     </style>
  25.   </head>
  26. <body>
  27.     <div id="bb">
  28.         <div>
  29.             <span class="f1">fff</span>
  30.         </div>
  31.         <div>
  32.             <span class="f2">fffff</span>
  33.         </div>
  34.     </div>
  35. </body>
  36. </html>

效果如下：

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

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

  1. #bb span {
  2.             display: inline-block;
  3.         }

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. css属性之vertical-align详解

    inline-block 该值会让元素生成一个内联级块容器(inline-level block container).一个inline-block的内部会被格式化成一个块盒,而该元素本身会被格式化成 ...

  2. web前端之文件上传

    前言 最近太忙一直没时间认真的写博客(哈哈哈),最近pm提一个需求,移动端需要一个上传图片的功能,允许多选.删除.预览.点击查看大图并可以滑动.虽然听起来很多,但是这个功能在web上实现过啊,使用we ...

  3. HTML 转文本及HTML内容提取(C#)

    //1.HTML直接转文本 //使用方法 HtmlToText convert = new HtmlToText(); textBox2.Text = convert.Convert(textBox1 ...

  4. 今天工作中遇到的根据用户id取得产品大类和相关小类的问题

    今天做了一个项目,需求是客户登陆后,可以从会员中心发布详细信息(包括联系信息和公司信息),插入到数据库后在将来生成一个公司页面模板,一般的产品大类+小类 用repeater嵌套就可以了,但是这个涉及到 ...

  5. Resharper

    http://baike.baidu.com/link?url=H8DVtrvKV1Cg-Hrz82C6ZiJOUXbi_3BfoROe-RlHhctPna4-BFfglPh2OsR-KmCqRZ7_ ...

  6. JS将图片文件转为64位字符串再post到接口上传图片

    HTML: <div class="ai-item upload-id-img"> <p>上传身份证照片</p> <div class=& ...

  7. jquery-multiselect在ie6里的一个bug

    在使用jquery-multiselect(一个把下拉框改造成带checkbox的可以多选的控件)时,正常时应该是下面这样:而它在ie6里是下面这样: 其中第一个bug参考‘ie6里png图片不透明’ ...

  8. php 中PHP_EOL使用

    一个小小的换行,其实在不同的平台有着不同的实现,为什么要这样,可以是世界是多样的.本来在unix世界换行就用/n来代替,但是windows为了体现他的不同,就用/r/n,更有意思的是在mac中用/r. ...

  9. 容器 list

    (1) 插入操作,不能使用MyTestContain.begin()+3 之类?!(要对数据进行复制) list<int>::iterator pr=MyTestContain.begin ...

  10. Activiti工作流学习-----基于5.19.0版本(1)

    该版本的Activiti运行须知: 1.JDK 6+,Eclipse最好是Kepler以上版本. 2.试验功能都有EXPERIMENTAL标注,被标注的部分不应该视为稳定的. 有兴趣的同学可以去了解下 ...