如何消除div之间的空隙

原创 2018年04月17日 10:56:43

问题描述:三个div,变成行内块(display:inline-block)之后,div之间会产生空隙;如图所示:
这里写图片描述
产生的原因:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小div在大div中居中的方法</title>
    <style>
    .parent {
          width:600px;
          height:200px;
          border:2px solid #000;
          /*font-size: 0;*/
        }
    .child {
        width:150px;
        height:100px;
        margin: auto; 
        display: inline-block; 
    }
    .parent>div:nth-child(1){
        background: red;
    }
    .parent>div:nth-child(2){
        background: blue;
    }
    .parent>div:nth-child(3){
        background: green;
    }
    </style>
</head>
<body>

    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>

浏览器解析的时候,会把行内元素(包括行内块元素)之间的回车换行符解析成一定的间隙,间隙的大小跟默认的字体大小设置有关。
解决办法:将其父元素加上font-size:0的属性,这样就不会有间隙了。注意哦,如果有字,就会看不见了。或者下面这种不换行的写法,但是实际开发中是不现实的。

    <div class="parent">
        <div class="child"></div><div class="child"></div><div class="child"></div>
    </div>
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yingleiming/article/details/79971693

消除两个div中间的空隙

早上排版的时候,碰到这个问题,就是两个div浮动后中间老是有一条白色的空隙,弄了好久,终于搞定了,做法如下:1、首先把div样式设为浮动(style="float:..."),假如我有两个div吧(d...
  • Sbangm
  • Sbangm
  • 2011-05-20 13:51:00
  • 6310

如何去除TD之间的空隙

table{border-collapse:collapse;}
  • u012307002
  • u012307002
  • 2014-02-16 16:20:29
  • 1051

消除内联元素的空隙

消除内联元素的空隙 1.产生的原因 当我们使用"display:inline-block"把块集元素转换为内联元素时,每两个内联元素之间有一定的空隙。 这个空隙是由于我们换行产生的。当我学到了节点(n...
  • besttoby01
  • besttoby01
  • 2017-08-12 15:01:33
  • 248

两个div之间有一段空隙(距离)怎么回事?

设置默认样式等均一切正常,此时可以查看是否使用了display: inline-block; 如果用了display:inline-block;标签换行时就会出现间隙。 如果必须用的话就改变...
  • microcosmv
  • microcosmv
  • 2016-11-27 22:08:51
  • 4586

div包含<img/>时,图片下方出现空隙的解决方法

最近在调页面时碰到这样一个情况,一个div包括一个图片,
  • u012645961
  • u012645961
  • 2014-08-30 11:10:55
  • 2254

如何解决input,inline-block元素间的空隙

在我们制作类似登陆框的东西的时候,需要用到label和 input text,但是实际上他们之间会存在空隙 用户名: 密码: 我们这...
  • AboyL
  • AboyL
  • 2017-01-13 22:55:36
  • 1076

div和img之间的缝隙问题

这次做的项目,客户说,banner图的上下之间不要留有空隙,仔细一看才发现,上下竟然都有空隙。审查元素,发现所有的div,img的padding和margin都是0,对于这个间隙究竟是如果产生的真的是...
  • liuyan19891230
  • liuyan19891230
  • 2015-12-27 21:18:09
  • 9351

div和iframe之间空隙太大的问题,终于解决了

test           function switchSysBar() {             var ssrc = document.all("frmTitle")...
  • woshidaniu
  • woshidaniu
  • 2014-04-11 00:39:50
  • 10052

inline-block元素之间的空隙的消除方法

在CSS布局中,如果我们想要将一些元素在同一行显示,其中的一种方法就是把要同行显示对的元素设置display属性为inline-block。但是你会发现这些同行显示的inline-block元素之间经...
  • wu_xiaozhou
  • wu_xiaozhou
  • 2016-10-25 17:29:12
  • 679
收藏助手
不良信息举报
您举报文章:如何消除div之间的空隙
举报原因:
原因补充:

(最多只允许输入30个字)