美文网首页饥人谷技术博客
KFH.003 - 怎么消除两个相邻div之间的空隙

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

作者: 旅行的意义zxy | 来源:发表于2016-10-23 00:49 被阅读78次

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之间有缝隙的问题,但是从实际角度出发,为了防止不必要的影响的产生,**尽量不要使用第三种方法去解决这一问题,以免产生更加麻烦的后果**

相关文章

网友评论

    本文标题:KFH.003 - 怎么消除两个相邻div之间的空隙

    本文链接:https://www.haomeiwen.com/subject/wgghuttx.html