关于inline-block 元素之间为何会产生间隔

最新推荐文章于 2022-03-28 19:00:00 发布

weixin_30383279

最新推荐文章于 2022-03-28 19:00:00 发布

阅读量76

点赞数

原文链接：http://www.cnblogs.com/btgyoyo/p/6261860.html

版权

关于inline-block 元素之间为何会产生间隔

现象：

<body>
    <input type="text">
    <input type="text">
</body>

在浏览器中的表现：

实时上不仅仅是 inline-block 会导致这种现象。 inline 也会导致。

那问题来了，为啥？

XML 经常在节点之间含有换行或空白字符。这是在使用简单的编辑器（比如记事本）时经常出现的情况。
下面的例子（由记事本编辑）在每行之间含有 CR/LF，

<body>
    <input type="text">
    <input type="text">
</body>

DOM 规范中规定，一切皆是节点，换行或者空格，会被当成文档节点来处理。#text
所以那个空隙就是这个空的文档节点导致。

window.onload = function() {
  for (var i = document.body.childNodes.length - 1; i >= 0; i--) {
    var node = document.body.childNodes[i];
    console.log(node)
      // if(node.nodeType==3){
      //     document.body.removeChild(node)
      // }

  };
}