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;
    }
    

    效果如下,间隙消除

  • 相关阅读:
    机器学习问题
    sklearn学习笔记
    机器学习之广义线性模型
    因子学习笔记、问题汇总
    数学相关知识汇总
    下载技巧汇总
    python scipy库
    20180122 PyTorch学习资料汇总
    机器学习基本概念笔记
    机械学习框架、分类
  • 原文地址:https://www.cnblogs.com/u14e/p/6994508.html
Copyright © 2011-2022 走看看