空白的文本结点,去除行内(内联)元素之间的空白节点
今天在做一个下拉菜单的时候在同一个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。