当前位置:Gxlcms > html代码 > 空格导致行内元素水平间隔问题_html/css_WEB-ITnose

空格导致行内元素水平间隔问题_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:53人阅读

在测试块级元素与行内元素区别时,发现本该没有间隔在一行的行内元素中间出现水平间隔。

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。

人气教程排行