inline-block元素可设宽高且同行排列，通过margin控制间距，需处理换行导致的默认空白，适用于导航栏等水平布局场景。
在CSS布局中，inline-block 是一种常用的显示方式，适合创建水平排列的元素，比如导航菜单、图片列表等。它结合了块级元素和行内元素的特点：可以设置宽高，又能像文字一样排成一行。利用 margin 控制这些元素之间的间距，是一种简单且有效的做法。
inline-block 元素的基本特性
将元素的 display 设置为 inline-block 后，该元素会：
保有块级元素可设宽高的能力不会独占整行，能与其他 inline 或 inline-block 元素并排显示受文本对齐属性（如 text-align）影响常见写法：
div { display: inline-block; width: 100px; height: 50px;}
使用 margin 控制间距
给 inline-block 元素添加 margin，可以直接控制它们之间的空隙。例如：
span { display: inline-block; margin-right: 20px;}
这样每个 span 元素右侧都会留出 20px 的空白，形成统一间隔。
立即学习“前端免费学习笔记（深入）”；
如果不想最后一个元素也带间距，可以配合 CSS 选择器清除：
Word-As-Image for Semantic Typography
文字变形艺术字、文字变形象形字
62 查看详情
span:last-child { margin-right: 0;}
注意默认间距问题
由于 inline-block 元素按文本处理，HTML 中的换行或空格会被渲染成一个空格，导致元素间出现意外空白。这常被误认为是 margin 没控制好。
解决方法有几种：
将 HTML 标签写在同一行：AB父容器设置 font-size: 0，子元素再重设字体大小使用注释消除空格：AB
实际应用场景示例
构建水平导航栏时非常实用：
.nav-item { display: inline-block; padding: 10px 15px; margin: 0 10px; background-color: #eee;}.nav-item:first-child { margin-left: 0;}
配合父容器 text-align: center，还能轻松实现居中对齐的按钮组。
基本上就这些。inline-block 配合 margin 虽然不如 Flex 布局灵活，但在简单场景下兼容性好、代码简洁，依然值得掌握。关键是处理好那个“看不见的空格”。
以上就是css布局inline-block与margin控制间距的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1058543.html
微信扫一扫 
支付宝扫一扫 
