块元素内行内块元素的一些间隔问题

块元素内存在多个行内块元素时,行内块元素存在间距

原因:元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。

解决方案:

1. 删除代码中的空白符(代码可读性差)
2. 设置父元素字体大小为0(行内元素必须设置字体,否则会继承父元素字体大小)
3. 浮动
4. 设置父元素，display:table和word-spacing

行内块元素与父级块元素存在间距

原因: 基线问题，div是块级标签，img是行内块元素，在块元素里默认有3px或者4px空白(如图)

不管有没有文字,都会有一个文本基线默认向下对齐导致

解决方案:

1. 改变基线对齐方式vertical-align:top; 
2. 设置父元素字体大小为0(行内元素必须设置字体,否则会继承父元素字体大小)
3. 为div定高并且设置设置overflow:hidden