空白的文本结点，去除行内（内联）元素之间的空白节点

今天在做一个下拉菜单的时候在同一个li里面用到<i>标签 和<b>标签 如代码所示

运行后本应该 显示的是 咳咳咳咳咳咳 6个在一起。但是：

解决的办法是

 

 

效果如下：

这是因为这两个标签都属于行内元素，就是内联元素。这样想象如果你在一行文字中加入了空格或者回车（这里不是</br>）你说在浏览器里面打开的时候怎么显示的？没错它就是显示的是一个空格也就是一个空白文本节点。既然知道行内元素和文本差不多。空白文本节点刚好等于一个一个字母的大小。那问题就变成怎么处理文本之间的间隙？

1------负的margin

2------letter-spacing 增加或减少字符间的空白（设置字符间距）或word-spacing,一个中文一个英文的；

3------上面提到空白节点的大小和一个字母一样 那么就在父级元素上加font-size:0；

4------别打那个空格或回车

5------改进版的4，在两行内元素间加注释<a></a><!---------一直到a换行。增加代码可读性><a></a>

 

inline 和inline-block都一样 遇到换行都会产生空白文本节点,。我喜欢用后面两个。4虽然代码可读性差点适合少量的。但是其他的方法有兼容性啊什么的一堆问题麻烦QAQ。

 

转载于:https://www.cnblogs.com/ruoyin/p/6759407.html