参考：http://myqianduan.diandian.com/css/1208110900
我们用firbug浏览别人网站时会发现设计者会在很多地方使用inline-block。我们都知道inline是声明div是内联对象，block是声明块对象，那么inline-block是什么意思，即内联又成块？接下来做个测试，让我们了解一下三者的区别和作用。
我们发现内联对象inline给它设置height和width是没有用的，致使它变宽变大的原因是内部元素的宽高+padding。观察inline对象的前后元素我们会发现Inline不单独占一行，其它元素会紧跟其后。
块对象block是可以设置宽高的，但是它的实际宽高是本身宽高+padding。观察block的前后元素我们会发现block要单独占一行。
当看到这里的时候我们就会想，如果我们即需要div有宽高，又不希望它独占一行怎么办？
这个时候我们就需要使用inline-block了，再观察一下上图，我们会发现inline-block即具有block的宽高特性又具有inline的同行元素特性。
最后提醒一下，IE6/7下padding对inline的宽高是对其没影响的。：
相关推荐
本篇文章将深入探讨`display:inline`、`display:block`以及`display:inline-block`这三种主要的显示模式之间的区别，帮助你更好地理解它们在实际开发中的应用。 首先，我们来看`display:inline`。这种模式使得元素...
display:inline-block 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。 但对于这个属性不是所有浏览器都识别。 支持的浏览器有：Opera、Safari。 但很遗憾，最...
在网页布局中，`inline-block` 是一种常用的CSS布局方式，它允许元素保持内联特性的同时，具有块级元素的宽度和高度可调整性。然而，`inline-block` 在不同浏览器间存在兼容性问题，特别是在Firefox中有一个知名的...
3. **Block与Delegate的区别** - Delegate模式需要定义协议、设置代理以及实现代理方法，步骤较多。 - Block可以直接在需要的地方定义和使用，回调更加直接。 4. **Block代替Delegate的优点** - 简化代码：Block...
本文主要关注`inline-block`元素的间距问题及其解决方案，同时也会对比`block`和`inline`的特性。 首先，`display: inline-block` 是一种混合型布局模式，它结合了`inline`元素的并排显示特性与`block`元素的宽高...
1、display:inline-block 让一个元素具有“区块元素”的属性（可以设置width和height），又具有“内联元素”的属性（不产生换行）。 2、IE中的inline-block IE6不支持这个属性，但IE8开始支持这个属性。 让IE6...
CSS 块状元素、内联元素和 inline-block elementos CSS 中的块状元素（Block Elements）和内联元素（Inline Elements）是两种基本的元素类型，它们在网页布局和样式设计中扮演着非常重要的角色。块状元素和内联元素...
【标题】：“inline-block 前世今生1” 【描述】：“同时我们知道 IE6、7 中 display:inline-block 是可以触发 hasLayout 的，触发了 hasLayout的元素表现出来的特征就是一” 【标签】：“软件/插件” 【正文】：...
在web设计中，"inline-block"是一种常用的CSS显示属性，它兼具内联元素和块级元素的特点。内联元素如，块级元素如，分别有其独特的布局特性。内联元素不会以新行开始，而是按照它们在文档中出现的顺序排列，而块级...
元素均分宽度、两端自适应对齐的布局在移动web项目中的需求还是挺多的，使用inline-block元素，配合text-align:justify，再注意处理好一些细节问题，便可以在现代浏览器上实现两端对齐，但是最后一行的处理却是个...
在网页布局设计中，`display:inline-block` 是一个非常常用且强大的CSS属性，它允许元素在保持块级元素特性的同时，像内联元素一样并排显示。然而，在不同浏览器之间，尤其是在Firefox（FF）上，可能会遇到一些显示...
`display:inline-block` 是 `display` 的一个值，它结合了块级元素（block-level element）和内联元素（inline element）的一些特性，为网页布局提供了更灵活的选择。在本篇文章中，我们将深入探讨 `display:inline-...
在本文中，我们将深入探讨一个特定的问题：在IE6中，当`<a>`标签同时使用`inline-block`和`text-indent`属性时出现的显示异常。 `inline-block`是一个CSS布局属性，它使元素表现得像内联元素，但同时允许设置宽度、...
为了弥补inline和block的不足，又扩充了inline-block属性； inline-blcok可以将对象呈递为内联对象，而内容作为块对象呈递。 通俗点讲就是“可定宽高的堆在一起”显示 为什么会有间隙 inline-blcok块之间的不可见...
display:block就是将元素显示为块级元素. block元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度, , , <form>, <ul> 和 是块元素的例子。
使用display: inline-block构建的简单网格系统。 有关此技术如何工作的更多信息，请阅读。 安装 有几种方法可以做到这一点。 下面列出了两个： NPM 安装它 npm install inline-block-grid --save-dev 如果你这样做...
各浏览器inline-block 元素默认的间隙，与字号。两个input，通过改变父元素font-size，用js计算他们之间空白的距离。貌似跟字体也有关系，测试时没有设置字体，也就是默认的字体。IE全系列chrome 39.0.2171.95(64-...