消除内联元素的空隙
程序员文章站
2022-03-16 08:48:43
...
消除内联元素的空隙
1.产生的原因
当我们使用"display:inline-block"把块集元素转换为内联元素时,每两个内联元素之间有一定的空隙。
这个空隙是由于我们换行产生的。当我学到了节点(node)时,就发现了这个问题产生的正真原因。
这些是常见的节点以及节点类型值
元素节点 Node.ELEMENT_NODE(1)
属性节点 Node.ATTRIBUTE_NODE(2)
文本节点 Node.TEXT_NODE(3)
原因:当我们换行时,会产生一个文本节点,这个文本节点的内容是换行
2.解决办法
第一种,不换行
既然是换行产生的,那么我们不换行就是了。所以第一种办法就是把所有的代码都写到一行,便不会产生空隙了。
但是这样子问题又来了,如果代码太多,写到一行会影响程序可读性,不好看嘛。所以第一办法也不是很可行。
第二种,改变字体大小
这个换行是字符吧,那么我们把字体大小改为0,他便不会产生了。
这种解决办法虽然也能解决,但是有时候会影响后面的字体,如果你后面忘记把字体变回来的话,那就尴尬了。
第二种办法还是会产生文本节点。
第三种 添加注释
在上一个标签尾部和下一个标签头部添加注释。
这种办法不会产生空隙,但会产生一个注释节点。
第四种 设置“margin-left”’
在CSS中设置margin-left为赋值,一般为-5就可以了。
这个办法是使用距左为负值把空隙覆盖掉,但会产生一个文本节点。
第五种 设置字间距或者字符间距
在父容器的样式中改变“word-spacing”或者“letter-spacing”为负值,一般为-5也就好的。
这种办法也会消除空隙,但是还是会产生文本节点。这里要注意的是改变间距会影响后面所有的字体,所有在后面要修改回来。
第六种 使用浮点形式
既然使用"display:inline-block"会产生空隙,那么我们不使用他,使用“float:left”就不会产生空隙了。
这种办法也会产生空隙,但是空隙会被掩盖掉。使用这种办法后,下一个元素一定要清除浮点带来的影响。
3.总结
只有第一种和第三种不会产生文本节点,但是这两种办法也忒烦了。第一种要把所有的代码写一行,会产生可读性问题。第二种就是需要你多写了,也会产生可读性问题。
剩余的第二种、第四种、第五种都是改变样式。这个只有第四种办法是不会影响后续代码的。第六种就是不使用"display:inline-block",转而使用“float:left”,但是会影响后续代码。所以第四种办法是最好的,不会影响后续代码。不过第二种使用的最多,一般我们需要在后续代码中调整字体的,所以这种使用比较多。
上一篇: 唐朝时期的女性地位到底是什么样的 她们的地位是高还是低
下一篇: 金庸养生的“十二要诀”
推荐阅读
-
HTML5的结构和语义(4):语义性的内联元素
-
HTML5的结构和语义(4):语义性的内联元素
-
html常见的块元素与内联(行内)元素用法说明(一)
-
解决img元素显示图片之间的空隙
-
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异_javascript技巧
-
手机端h5页面,消除行内块级元素(inline-block)间距的有效办法
-
html常见的块元素与内联(行内)元素用法说明(一)
-
html的块级、内联、内联块级元素基础_html/css_WEB-ITnose
-
CSS/块级元素与内联元素的深入理解_html/css_WEB-ITnose
-
HTML5的结构和语义——语义性的内联元素(四)