css-部分移动端div间隙

CSS中，我们经常会遇到移动端div间隙的问题，这种问题一般是由于浮动、百分比、字体大小等引起的。下面我们来简单介绍一下处理div间隙的方法。

1.去除div之间的空格

div>
    1/div>
    div>
    2/div>
    

这种情况下两个div之间会有一个空格，可以通过去掉空格的方式解决。

div>
    1/div>
    div>
    2/div>
    

2.给父元素加font-size:0

div class="parent">
    div class="child-1">
    1/div>
    div class="child-2">
    2/div>
    /div>

.parent{
    font-size:0;
}
.child-1,.child-2{
    font-size:16px;
}
    

这种情况下父元素会有一个默认的字体大小造成间隙，给父元素加上font-size:0会去掉这个间隙。

3.使用float浮动

div class="parent">
    div class="child-1">
    1/div>
    div class="child-2">
    2/div>
    /div>

.parent{
    overflow: hidden;
/*清除浮动*/}
.child-1,.child-2{
    float: left;
    width: 50%;
}
    

这种情况下给子元素加上浮动会去掉间隙，父元素的overflow属性也要设为hidden来清除浮动。

4.使用line-height

div class="parent">
    div class="child-1">
    1/div>
    div class="child-2">
    2/div>
    /div>

.parent{
    line-height: 0;
}
.child-1,.child-2{
    line-height: 1.5;
    /*根据字体大小调整*/display: inline-block;
    vertical-align: top;
    width: 50%;
}
    

这种情况下可以通过给父元素加上line-height:0，然后给子元素加上inline-block和垂直对齐方式来去掉间隙。

综上所述，处理移动端div间隙问题有多种方法，需要根据具体情况选择合适方法，避免出现不必要的差错。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！