display:inline和display:inline-block的区别
先来一张图：
测试代码：
<!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的区别的更多相关文章
- display:inline 和display:inline-block和display:block的区别
之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...
- 区别CSS中display：box；inline；none以及HTML中 <frame> 标签<table> 标签的 frame 属性
区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内 ...
- css学习--inline-block详解及dispaly:inline inline-block block 三者区别精要概括
*知识储备: 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行. 块级元素:是可以控制宽和高.margin等,并且会换行. 1.inline-block 详解 (1)一句话就是在 ...
- js style.display = "" 和style.display="none" 区别
style.display = "":是清除display样式,display将使用默认值(块元素会变成block,内联元素会变成inline)style.display=&quo ...
- display:box和display:inline-box的区别
display:box我想大家很熟悉,那么display:inline-box呢,今天在项目中需要设置这样的属性box-align:center,那么就想到用 display:box;如果设置BOX, ...
- CSS3 display:flex和display:box有什么区别？
**区别**,仅是各阶段草案命名.- W3C 2009年第1次草案:[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723 ...
- display:box；display:flex；弹性盒模型
display:box:display:flex:弹性盒模型 非常适用于移动端.PC端高级浏览器,效果也很好. display: -webkit-box; display: -moz-box; dis ...
- display:flex和display:box布局浏览器兼容性分析
display:flex和display:box都可用于弹性布局,不同的是display:box是2009年的命名,已经过时,用的时候需要加上前缀:display:flex是2012年之后的命名.在实 ...
- display:inline 跟 display:block 跟 display:inline-block区别
我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...
- display:inline与display:block——行内元素显示与块级元素显示
display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认displa ...
随机推荐
- 今天工作中遇到的根据用户id取得产品大类和相关小类的问题
今天做了一个项目,需求是客户登陆后,可以从会员中心发布详细信息(包括联系信息和公司信息),插入到数据库后在将来生成一个公司页面模板,一般的产品大类+小类 用repeater嵌套就可以了,但是这个涉及到 ...
- Unity5.3——UI之Canvas
原文:http://docs.unity3d.com/Manual/UISystem.html Canvas 所有的UI都应该放在Canvas里面(子层).Canvas是一个带有Canvas组件的Ga ...
- CSS应用二
样式中的顺序问题. 如:padding,margin,border,等,都是按照顺时针方向赋值的,及上右下左. Padding:1px 2px 3px 4px;(top:1px;right:2px;b ...
- jquery实现弹出即消失的提示层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- contentInset，contentsize和contentOffset区别
contentInset,contentsize和contentOffset区别 今天看别人用到了contentInset,觉得很迷糊,于是gogle了一下,搜到了一篇分析的很好的文章,转在这里, ...
- jquery幻灯片--渐变
网站上为了设计,需要一些幻灯片效果,现在网站有很多插件可以使用. 想要成为以为牛逼的程序员,绝对不允许只会用别人的插件而已,不然你只能是“代码”的搬运工,而不敢做出自己的创新. 首先使用jquery做 ...
- Codeforces 540D Bad Luck Island
http://codeforces.com/problemset/problem/540/D 题目大意: 会出石头.剪刀.布的人分别有r,s,p个,他们相互碰到的概率相同,输的人死掉,问最终活下去的人 ...
- 【转】解决java.lang.IllegalStateException: The content of the adapter has changed but ListView...的问题
原文网址:http://blog.csdn.net/ueryueryuery/article/details/20607845 我写了一个Dialog,Dialog中有一个ListView,想要点Li ...
- 段错误bug的调试
我们在用C/C++语言写程序的时侯,内存管理的绝大部分工作都是需要我们来做的.实际上,内存管理是一个比较繁琐的工作,无论你多高明,经验多丰富,难 免会在此处犯些小错误,而通常这些错误又是那么的浅显而易 ...
- 黑马程序员_Java面向对象2_继承
4.面向对象_继承 4.1继承的概述 提高了代码的复用性. 让类与类之间产生了关系,有了这个关系,才有多态的特性. 注意:千万不要为了获取其他类的功能而去继承,简化代码而继承.必须是类与类之间有所属关 ...