inline-block 是一种兼具行内和块级特性的布局方式，可设置宽高且同行显示；2. 使用 display: inline-block 可实现元素并列排列，适用于导航、图片列表等；3. 元素间默认间隙可通过 HTML 不换行、font-size: 0 或 letter-spacing 调整消除；4. 适用于兼容性要求高的多列布局，虽有 Flex 和 Grid 替代方案，但在简单场景仍实用。
在CSS布局中，inline-block 是一种常用的显示方式，它结合了块级元素和行内元素的优点，既能像行内元素一样在同一行排列，又能设置宽高、内外边距等块级特性。掌握它的使用方法，对实现常见的水平布局非常有帮助。
什么是inline-block
通过设置 display: inline-block;，元素会表现为： - 可以和其他元素在同一行显示（类似 inline） - 能够设置 width、height、padding、margin 等盒模型属性（类似 block） - 不会独占一整行，但可以控制尺寸
基本使用方法
将任意元素设置为 inline-block 即可实现内联块布局：
div {display: inline-block;
width: 100px;
height: 50px;
margin: 5px;
}
这样多个 div 就可以在一行内并列显示，适合做导航菜单、图片列表等布局。
解决默认间隙问题
使用 inline-block 元素时，HTML 中的换行或空格会被当作文本处理，导致元素之间出现约 4px 的间隙。常见解决办法有：
eshop网上书店源码
下载
适合初学的标准三层架构，采用ajax，页面布局div+css符合w3c，用vs自带的sqlserver，免配置sqlserver，使用方便，里面共有5个项目，点击最外层的.sln直接可运行。网站采用asp.net 用户角色配置（membership，UserRoles），用户角色、权限可在asp.net配置里修改，注册，登陆均采用asp.net登陆控件，网站根据用户角色自定义sitemap，基本上
立即学习“前端免费学习笔记（深入）”；
- 将所有 inline-block 元素写在一行，不留空格
- 父容器设置 font-size: 0，子元素再单独恢复字体大小
- 给父元素设置 letter-spacing: -4px，子元素重置为 normal
- 使用 flex 布局替代（现代方案）
典型应用场景
inline-block 特别适合以下情况：
- 横向排列的导航菜单项
- 图片与文字混排的图文卡片
- 需要固定宽度且同行显示的表单控件
- 兼容性要求较高的多列布局（在不支持 Flex 或 Grid 的老浏览器中）
基本上就这些。虽然现在有更强大的 Flex 和 Grid 布局，但在一些简单场景或需要兼容旧浏览器时，inline-block 依然是实用的选择。
