关于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 - ; i >= ; i--) {

    var node = document.body.childNodes[i];

    console.log(node)

      // if(node.nodeType==3){

      //     document.body.removeChild(node)

      // }

  };

}

所以我们去除掉这个节点就可以解决这个问题。就像注释的那段代码那样。其他的各种解决方案也有很多。这里不就介绍了。

当然，如果我们工程化项目时会压缩代码这时候会去除一些换行和空格，这种问题也可以避免。

关于inline-block 元素之间为何会产生间隔的更多相关文章

  1. CSS3如何去除 inline block 元素之间多出的空格

    display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...

  2. 去除行内(inline/inline-block)元素之间的间距

    先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { displa ...

  3. 关于block元素和inline元素

    呃...这个会不会太基础了.最近在复习,所以基础知识也不能够忽略. 根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.ht ...

  4. block元素和inline元素的特点

    一.block元素的特点 1.处于常规流中时,如果width没有设置,会自动填充满父容器 2.可以设置height/width及margin/padding 3.处于常规流中时,布局在前后元素位置之间 ...

  5. inline元素、block元素

    inline元素 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行 高.行高.以及外边距和内边距不可改变 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化 内联元素只能 ...

  6. 多个inline元素、block元素、inline-block元素在父容器中的换行情况

    1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...

  7. 当inline元素包裹block元素时会发生什么

    经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...

  8. inline元素、block元素、inline-block元素

    inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示, ...

  9. 清除inline-block元素之间的空白

    一个元素如果被设置为display:inline-block,那么这个元素将表现为行内块的性质.被设为行内块的元素 对内(子元素)表现为块级框,具体为可以设置高度宽度,可以设置垂直margin和pad ...

随机推荐

  1. php如何支持实现多线程并发

    <?php if(function_exists('date_default_timezone_set')) { date_default_timezone_set('PRC'); } func ...

  2. C#Web编程

    1.Web服务器控件可以包含服务器上调用的事件处理程序.只有送回服务器时,才在服务器上触发事件.把autoPostBack设置为true,事件将立即传给服务器.这样就会使客户端调用Javascript ...

  3. php开启openssl的方法

    windows下开启方法: 1: 首先检查php.ini中:extension=php_openssl.dll是否存在, 如果存在的话去掉前面的注释符‘:’, 如果不存在这行,那么添加extensio ...

  4. [lua]lua简介

    在这篇文章中,我想向大家介绍如何进行Lua程序设计.我假设大家都学过至少一门编程语言,比如Basic或C,特别是C.因为Lua的最大用途是在宿主程序中作为脚本使用的. Lua 的语法比较简单,学习起来 ...

  5. YTU 2295: KMP模式匹配 一（串）

    2295: KMP模式匹配 一(串) 时间限制: 1 Sec  内存限制: 128 MB 提交: 32  解决: 22 题目描述 求子串的next值,用next数组存放,全部输出 输入 输入一个字符串 ...

  6. 20150618_Andriod _set Dialog_弹出式菜单

    参考地址: http://blog.csdn.net/zhyl8157121/article/details/8169172                   http://blog.csdn.ne ...

  7. 浅谈MySQL索引背后的数据结构及算法(转载)

    转自:http://blogread.cn/it/article/4088?f=wb1 摘要 本文以MySQL数据库为研究对象,讨论与数据库索引相关的一些话题.特别需要说明的是,MySQL支持诸多存储 ...

  8. LoadRunner使用之变量关联

    性能测试LR小结之参数关联(LoadRunner11.0) 关联对于LR是经常需要用到的,本章使用简单登录来介绍关联功能. 1.       Q:何为关联? 所谓的关联就是把脚本中某些写死的代码(ha ...

  9. Prompt isNaN 数组 function DOM window.open/close/location/history

    1.prompt的利用 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defa ...

  10. out 传值

    public void Out(out int a, out int b) {//out相当于return返回值 //可以返回多个值 //拿过来变量名的时候,里面默认为空值 a=1; b=2; } s ...