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

现象：

  1. <body>
  2.     <input type="text">
  3.     <input type="text">
  4. </body>

在浏览器中的表现：

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

那问题来了，为啥？

  1. XML 经常在节点之间含有换行或空白字符。这是在使用简单的编辑器（比如记事本）时经常出现的情况。
  2. 下面的例子（由记事本编辑）在每行之间含有 CR/LF，
  1. <body>
  2.     <input type="text">
  3.     <input type="text">
  4. </body>
  5.  
  6. DOM 规范中规定，一切皆是节点，换行或者空格，会被当成文档节点来处理。#text
    所以那个空隙就是这个空的文档节点导致。
  1. window.onload = function() {
  2.   for (var i = document.body.childNodes.length - ; i >= ; i--) {
  3.     var node = document.body.childNodes[i];
  4.     console.log(node)
  5.       // if(node.nodeType==3){
  6.       //     document.body.removeChild(node)
  7.       // }
  8.  
  9.   };
  10. }

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

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

关于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. Oracle 11gR2新建空表不分配Segment

    一.引言: 在看<收获,不止Oracle>的神奇,走进逻辑体系世界一章时,需要新建一张表查看Extents的情况,由于该书的环境是ORACLE10G的,因此新建空表以后立刻就分配Segme ...

  2. 记录一下：chrome上，把网页保存为文件的插件

    插件地址: https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoal ...

  3. java代码实现rabbitMQ请求

    1.下载rabbitMQ的客户端,下载地址 http://www.rabbitmq.com/download.html

  4. ECshop中defined('IN_ECS')的实现原理

    在PHP中经常看到如下代码   if (!defined('IN_ECS'))   {       die('Hacking attempt');   }   实现的原因以及原理如下:     ecs ...

  5. 20145227 《Java程序设计》第7周学习总结

    20145227 <Java程序设计>第7周学习总结 教材学习内容总结 第十二章 Lambda 如果使用JDK8的话,可以使用Lambda特性去除重复的信息. 在只有Lambda表达式的情 ...

  6. css3 动画 执行一次

    function testAnim(x) {   $('#animationSandbox').removeClass().addClass(x + ' animated').one('webkitA ...

  7. C++陷阱之慎用string类

    我们知道,string类为我们提供了很多的便利,我们用string类能方便的做字符串的各种操作,避免了我们直接操作char指针而产生的一些繁琐的操作,和内存泄露的可能性,可是string类也是有陷阱的 ...

  8. Behavior Designer中的内置消息机制

    最近在用Behavior Designer,其中需要用到消息机制,看了一下其中自带了这套东西 注册 Owner.RegisterEvent<string>("Message&qu ...

  9. 2017年1月6日 星期五 --出埃及记 Exodus 21:32

    2017年1月6日 星期五 --出埃及记 Exodus 21:32 If the bull gores a male or female slave, the owner must pay thirt ...

  10. [转]varchar(n),nvarchar(n) 长度、性能、及所占空间分析

    varchar(n),nvarchar(n) 中的n怎么解释: nvarchar(n)最多能存n个字符,不区分中英文. varchar(n)最多能存n个字节,一个中文是两个字节. 所占空间: nvar ...