KFH.003 - 怎么消除两个相邻div之间的空隙

2016-10-23 本文已影响78人旅行的意义zxy

QQ图片20161023001930.png

具体原因（个人推测）
在CSS文件最开头已经通过通用选择器继承选择了padding:0和margin:0，但是仍然会出现这种问题。经过代码分析可能是将两个div并排显示的时候使用了display:online-block的原因，虽然online-block是行内块元素的属性，但是它同样具有块级元素的属性，即在font-size不为0的情况下会有大概3px的间隙。这样推测的原因是在后面的解决方法中可以通过设置父元素的font-size:0来解决。

7a227e11573632e564705c1cee6ca3f6_r.png

0c861bc077d6ab3975a859cd86e9491a_b.png

0cf347d3ac5704c8f562ce33fb99f81d_b.png

1c9ccb38387ca1e6b2d1d78287ee529e_b.png

2、通过设置父元素的font-size:0来解决这个问题

     *该方法适用于只包含图片的div*

3、通过margin-left/right:-3px来解决这个问题

    三种方法都可以解决两个div之间有缝隙的问题，但是从实际角度出发，为了防止不必要的影响的产生，**尽量不要使用第三种方法去解决这一问题，以免产生更加麻烦的后果**