偶遇问题 - - 空格导致行内元素水平间隔问题
2015-09-03 20:22
211 查看
在测试块级元素与行内元素区别时,发现本该没有间隔在一行的行内元素中间出现水平间隔。
效果如下图:
导致这种问题出现的原因在于html中span便签之间的空格。如果去掉空格那么就不会有间隔。
效果如下图:
虽然找到了问题所在,可是如果有多个行内元素,代码挤在一行会造成阅读困难,怎么办呢?
拓展阅读:1.【原】行内元素产生水平空隙是bug吗 - 白树 - 博客园
/article/4886079.html
2. http://davidwalsh.name/remove-whitespace-inline-block
经过上网搜索资料,发现"行内元素之间产生的间距,是由于换行符、tab(制表符)、空格等字符引起,而字符的大小是定义字体大小来控制",所以去除间隔可以从改变字体的大小入手。即font-size:0;不过具体使用还得做相应调整,不一定是值为0。
<span>行内元素</span> <span>行内元素</span> <span>行内元素</span> <span>行内元素</span>
效果如下图:
导致这种问题出现的原因在于html中span便签之间的空格。如果去掉空格那么就不会有间隔。
<span>行内元素</span><span>行内元素</span><span>行内元素</span>
效果如下图:
虽然找到了问题所在,可是如果有多个行内元素,代码挤在一行会造成阅读困难,怎么办呢?
拓展阅读:1.【原】行内元素产生水平空隙是bug吗 - 白树 - 博客园
/article/4886079.html
2. http://davidwalsh.name/remove-whitespace-inline-block
经过上网搜索资料,发现"行内元素之间产生的间距,是由于换行符、tab(制表符)、空格等字符引起,而字符的大小是定义字体大小来控制",所以去除间隔可以从改变字体的大小入手。即font-size:0;不过具体使用还得做相应调整,不一定是值为0。
相关文章推荐
- linux命令进阶小记
- 最大公约数Stein算法之verilog实现
- LCS (最长公共子序列)
- Cocos2d-x xml解析
- 关于ListView的优化!
- 【extern】如何使用关键字extern "C"?
- ViewPager+Fragment实现滑动显示,且Fragment里面又放Fragment+viewPager
- Delphi考虑sql注入 QuotedStr
- Block Formatting Contexts
- 思维值惰性
- hdoj 1385 Minimum Transport Cost
- Maven系列2--pom.xml 配置详解
- js数据结构与算法存储结构
- Redis安装
- 【英语】Bingo口语笔记(62) - 生气道歉场景的表达
- IOS SWIFT 简单操作文件
- POJ 2125 Destroying The Graph(二分图最小点权覆盖)
- 初始化和清除
- hdoj 2095 find your present (2)【位运算,异或】
- 【codechef】Singal Pipes(DFS求期望)