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 ...
随机推荐
- （一）《Java编程思想》学习——按位运算符、移位运算符
(第三章) (一)按位运算符 按位逻辑运算符有: “与”(AND) & 1&1=1;1&0=0;0&0=0 “或”(OR) | 1|1=1;1|0=1;0 ...
- Android --------- 压缩图片的尺寸和大小
压缩图片大小,尺寸不变 将已知路径的图片压缩至不大于目标大小,并保存至指定路径 /** * 质量压缩,通过给定的路径来压缩图片并保存到指定路径 * * @param srcPath * 资源图片的路径 ...
- [c#]asp.net开发微信公众平台(2)多层架构框架搭建和入口实现
上篇已经设计出比较完善的数据库了,这篇开始进入代码. 首先把上篇设计的数据库脚本在数据库中执行下,生成数据库,然后在VS中建立项目,为了方便理解和查看,我设计的都是很直白的类名和文件名,没有命名空间 ...
- shell获取日期（昨天，明天，上月，下月）
今天 sh-4.1$ echo `date +%Y-%m-%d` 2016-08-17 昨天 sh-4.1$ echo `date -d "last day" +%Y-%m-%d` ...
- innodb_flush_method参数解析
innodb_flush_method这个参数控制着innodb数据文件及redo log的打开.刷写模式,对于这个参数,文档上是这样描述的:有三个值:fdatasync(默认),O_DSYNC,O_ ...
- iOS项目名称、版本号与屏幕分辨率
iOS的版本号,一个叫做Version,一个叫做Build,这两个值都可以在Xcode 中选中target,点击“Summary”后看到. Version在plist文件中的key是“CFBundle ...
- jQuery事件与事件对象
事件是脚本编程的灵魂,本篇来介绍jQuery中的事件处理及事件对象. 事件与事件对象 首先,我们来看一下经常使用的添加事件的方式: <input type="button" ...
- POJ 1064 Cable master（二分查找+精度）（神坑题）
POJ 1064 Cable master 一开始把 int C(double x) 里面写成了 int C(int x) ,莫名奇妙竟然过了样例,交了以后直接就wa. 后来发现又把二分查找的判断条 ...
- CSS阻止文本选择
在日常运用中,经常遇到点击按钮/菜单的时候,选中了文本,为了避免这种情况,可以使用纯css来解决这个问题(IE10+),对于旧版本的就只能用js:onselectstart = 'return fal ...
- 3月20日html(二) 图片热点，网页划分，表单
1.图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. <img src=" usemap="map" name=" ...