zoukankan      html  css  js  c++  java
  • 去掉inline-block间的间隙

    当给多个相邻元素设置display: inline-block时,元素之间默认会产生间隙

    <div class="wrapper">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    
    .wrapper {
         202px;
        height: 202px;
        margin: 30px auto;
        border: 1px solid rgba(0, 0, 0, 3);
    }
    .item {
         50px;
        height: 50px;
        display: inline-block;
        background: rgba(78, 7, 9, .4);
    }
    
    

    效果如图,产生间隙。

    一种思路是在html中手动删掉div之间的空格或者div之间添加注释

    <div class="wrapper">
        <div class="item"></div><!--
        --><div class="item"></div><!--
        --><div class="item"></div><!--
        --><div class="item"></div>
    </div>
    
    <div class="wrapper">
        <div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div>
    </div>
    

    显然上面两种方法虽然有效,但是看起来很糟糕,而且编写也很不便利。还有一种消除间隙的方法就是每个div设置为float,这里不讨论

    当然还有一种一劳永逸的方法: 给父元素设置font-size: 0

    .wrapper {
        // 补充
        font-size: 0;
    }
    

    效果如下,间隙消除

  • 相关阅读:
    数据库结构中的"树"
    Jquery学习
    cms系统也不复杂
    让你的博客园变灰
    IList对象排序方法
    计算机简介(二)
    在同一台电脑上使用U盘时快时慢的解决方法
    计算机简介
    合并排序
    javascript小结
  • 原文地址:https://www.cnblogs.com/u14e/p/6994508.html
Copyright © 2011-2022 走看看