Bruce_Zhu 于 2016.10.23
via.https://www.zhihu.com/question/39743047
怎么消除两个相邻div之间的空隙
- 遇到的问题如下图
QQ图片20161023001930.png
-
具体原因（个人推测）
在CSS文件最开头已经通过通用选择器继承选择了padding:0和margin:0，但是仍然会出现这种问题。经过代码分析可能是将两个div并排显示的时候使用了display:online-block的原因，虽然online-block是行内块元素的属性，但是它同样具有块级元素的属性，即在font-size不为0的情况下会有大概3px的间隙。这样推测的原因是在后面的解决方法中可以通过设置父元素的font-size:0来解决。
-
解决办法
解决办法有三种：
1、通过将两个div紧密地写在一起来解决这种问题
7a227e11573632e564705c1cee6ca3f6_r.png
0c861bc077d6ab3975a859cd86e9491a_b.png
0cf347d3ac5704c8f562ce33fb99f81d_b.png
1c9ccb38387ca1e6b2d1d78287ee529e_b.png
2、通过设置父元素的font-size:0来解决这个问题
*该方法适用于只包含图片的div*
3、通过margin-left/right:-3px来解决这个问题
三种方法都可以解决两个div之间有缝隙的问题，但是从实际角度出发，为了防止不必要的影响的产生，**尽量不要使用第三种方法去解决这一问题，以免产生更加麻烦的后果**
网友评论