0
0
php中文网
发布时间：2016-06-24 11:37:34
|1629人浏览过
|来源于php中文网
原创
在测试块级元素与行内元素区别时，发现本该没有间隔在一行的行内元素中间出现水平间隔。
1 行内元素2 行内元素3 行内元素4 行内元素
效果如下图：
导致这种问题出现的原因在于html中span便签之间的空格。如果去掉空格那么就不会有间隔。
立即学习“前端免费学习笔记（深入）”；
行内元素行内元素行内元素
效果如下图：
虽然找到了问题所在，可是如果有多个行内元素，代码挤在一行会造成阅读困难，怎么办呢？
拓展阅读：1.【原】行内元素产生水平空隙是bug吗 - 白树 - 博客园
http://www.cnblogs.com/PeunZhang/archive/2012/09/28/2706094.html
2. http://davidwalsh.name/remove-whitespace-inline-block
经过上网搜索资料，发现"行内元素之间产生的间距，是由于换行符、tab(制表符)、空格等字符引起，而字符的大小是定义字体大小来控制",所以去除间隔可以从改变字体的大小入手。即font-size：0；不过具体使用还得做相应调整，不一定是值为0。
相关文章
如何修复 Tailwind CSS 移动端右侧黑边（水平滚动条/溢出）问题
如何在打印模式下彻底禁用 HTML 表格的水平滚动条并自动换行适配
HTML5空格和margin有啥区别_空格与外边距的使用场景【说明】
如何实现流畅无抖动的 Marquee 滚动动画
如何使用 Flexbox 实现文本左对齐、图片右对齐的响应式布局
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
相关专题
本专题深入讲解 C++ 中的常见设计模式与架构优化，包括单例模式、工厂模式、观察者模式、策略模式、命令模式等，结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析，帮助开发者掌握 如何运用设计模式构建高质量的软件架构，提升系统的灵活性与可扩展性。
14
2026.01.30
热门下载
相关下载
精品课程
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
