HTML中的空格占据空间问题

问题：行内元素或者display设置为inline-block的元素之间如果有空格或者换行会存在一小段的间距大概4px左右，如下图所示，经测试IE，CH， FF中均存在这种问题，通常的解决办法也很简单那就是写在一行且不留空格，元素少时尚能解决问题元素多时一行的长度将超过一屏的宽度，这是非常不协调的排版方式，所以我们必须找到一种简单且能解决问题的办法：

    
父元素
    
子元素1
    
子元素2

2018-07-22_151348.png

办法：通过广泛的搜索找到几种比较合适的方法（张鑫旭总结的《去除inline-block元素间间距的N种方法》），几种方法中大都差强人意，这里说两种比较好一点的办法：

1.借用 < !-- --> ：没错就是借用html的注释，注释里的空格和换行都不会影响网页的实际渲染，所以借用这种方式可以达到消除间距的问题，缺陷是稍有不美观，但影响不大；

    
父元素
    
子元素1
子元素2

2018-07-22_152453.png

2.font-size:0; ：通过给父元素设置font-size：0可以达到消除空格的效果;

    
父元素
    
子元素1
    
子元素2

2018-07-22_153611.png

如果是一篇普通的备忘性质的文章可能到这就应该结束了，可我并没有满足，因为对这两种仍旧不满意，1方法在多个子元素时会显得十分臃肿；2方法要分别设置子元素字体大小（不设置继承的font-size为0），如果都是一样的元素通过css设置还算方便如果多条不同种类的例如有div和h3且字体并不容易设置，h3的字体大小为1.17em，默认父元素为16px，计算为18.72px；如果不去查我想大多数人都不知道h3的字体大小吧，起码我不知道。1方法已经“不可救药”了，我们看看2方法还有没有抢救一下的可能；

首先思考一下原理：
单独的空格其实并不会存在，那什么情况下会存在呢，存在于字中间，存在于字和行内元素之间，存在于行内元素与行内元素之间；当font-size为0时，字没有宽高，所以空格也不会单独占据空间，通过上面的结果我们知道了行内元素之间也有这种现象，所以我们可以认为行内元素和字有某种共有的特性，当font-size为0时也触发的元素与元素之间空格不显示的效果，此时我们再给子元素设置字体里面的字就可以显示出来了；所以如果父元素存在文本元素时需要用标签包裹添加字体大小才能显示出来；
原理知道了再看看有哪些地方不满意需要改造，子元素设置大小我们不满意，有没有哪个属性可以保持原来的大小而不是去计算到底多大？这个当然有的啦，设置为默认大小即可：font-size:medium; 还有一个问题我们不满意，分别设置很麻烦能一块设置吗？当然是能的了，考虑到只影响到子元素我们使用直接子元素选择器：>；我们需要选到所有的子元素，脑海里有个符号冒了出来那就是：*；代码如下：

    

    

        
父元素
        
子元素1
        
子元素2
    

2018-07-22_165851.png

经过测试我们发现这个方法也并非完美H3被设置为了16px而不是18.72px；翻阅文档发现原来medium是绝对大小，一般是16px，其实也不必太过担心因为h1-h6大小因浏览器而异所以一般在初始化样式时会改变它的大小，下图为淘宝网中h3的font-size大小：

2018-07-23_215422.png