一、今天完成的任务：

  1，大部分都在准备小课堂，写demo。

  2，任务七的改善进行提交。

二、遇到的问题：

  1，如图所示：设置了body{max-width:760px、margin：0 auto；}之后，因为header设置了100%的缘故，紧贴左右两边，并不居中。

 解决方法：

   给header设置个最大宽度，设置和body的最大宽度一样。

三、明天的计划：

  开始做任务十。

四、收获：

 了解了inline-block的N种解决方法：个人感觉只有letter-spacing和word-spacing比较好用。

去掉inline-block间隙的几种方法

小课堂【郑州第五十八期】

一、背景介绍

display:inline; 内联元素，简单来说就是在同一行显示。 
display:block; 块级元素，简单来说就是就是有换行，会换到第二行。 
display:inline-block; 就是在同一行内的块级元素,也就是我们常说的表格布局。

二、知识剖析

方法三：font-size：0

这个方法，基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。

方法四：使用margin负值

margin负值的大小与上下文的字体和文字大小相关，Arial字体的margin负值为-3像素，Tahoma和Verdana就是-4像素，而Geneva为-6像素。 由于外部环境的不确定性，以及最后一个元素多出的父margin值等问题，这个方法不适合大规模使用。

方法五：使用word-spacing和letter-spacing

一个是字符间距(letter-spacing)一个是单词间距(word-spacing)，大同小异。 负值只要大到一定程度，其兼容性上的差异就可以被忽略。因为，貌似负值很大，也不会发生重叠。

三、常见问题

四、解决方案

在不同情况下选用不同的方法，font-size基本上可以解决大部分浏览器下inline-block元素之间的间距

或者可以同时写多种方法，这样就可以兼容不同浏览器

五、编码实战

六、拓展思考

inline-block空隙产生的原因

通过前面的列子我们可以看到当没有换行或者回车时，空隙就不存在了，所以说间隙是由换行或者回车导致的，应该无大问题。 ，其实space是由换行或回车所产生空白符所致，解决办法：就是去掉空白符。 
为什么font-size会对间隙有影响。 space是由换行或回车所产生空白符所致，既然是字符当然无法摆脱font的控制。

七、参考文献

参考一： 张鑫旭-鑫空间-鑫生活

参考二： inline-block元素间间隙产生及去除详解

参考三：百度菜鸟前端贴吧

更多讨论

其他去除inline-block元素间间隙的方法