zoukankan      html  css  js  c++  java
  • inline-block空隙怎么解决

    方法一:移除空格

    元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了。考虑到代码可读性,显然连成一行的写法是不可取的,我们可以:

    <div class="space">
        <a href="##">
        惆怅</a><a href="##">
        淡定</a><a href="##">
        热血</a>
    </div>
    

     或者是:

    <div class="space">
        <a href="##">惆怅</a
        ><a href="##">淡定</a
        ><a href="##">热血</a>
    </div>
    

     或者是借助HTML注释:

    <div class="space">
        <a href="##">惆怅</a><!--
        --><a href="##">淡定</a><!--
        --><a href="##">热血</a>
    </div>
    

     方法二:使用margin负值

    .space a {
        display: inline-block;
        margin-right: -3px;
    }
    

    margin负值的大小与上下文的字体和文字大小相关,间距对应大小值可以参见“基于display:inline-block的列表布局

    例如,对于12像素大小的上下文,Arial字体的margin负值为-3像素,Tahoma和Verdana就是-4像素,而Geneva为-6像素。

    由于外部环境的不确定性,以及最后一个元素多出的父margin值等问题,这个方法不适合大规模使用。

    方法三:让闭合标签吃胶囊

    如下处理:

    <div class="space">
        <a href="##">惆怅
        <a href="##">淡定
        <a href="##">热血</a>
    </div>
    

    注意,为了向下兼容IE6/IE7等喝蒙牛长大的浏览器,最后一个列表的标签的结束(闭合)标签不能丢。

    在HTML5中,我们直接:

    <div class="space">
        <a href="##">惆怅
        <a href="##">淡定
        <a href="##">热血
    </div>
    

    方法四:使用font-size:0

    如下处理:

    .space {
        font-size: 0;
    }
    .space a {
        font-size: 12px;
    }
    

     这个方法,基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。不过有个浏览器,就是Chrome, 其默认有最小字体大小限制,因为,考虑到兼容性,我们还需要添加:
    类似下面的代码:

    .space {
        font-size: 0;
        -webkit-text-size-adjust:none;
    }
    

    方法五:使用letter-spacing

    如下处理:

    .space {
        letter-spacing: -3px;
    }
    .space a {
        letter-spacing: 0;
    }
    

    方法六:使用word-spacing

    如下处理:

    .space {
        word-spacing: -6px;
    }
    .space a {
        word-spacing: 0;
    }
    

     一个是字符间距(letter-spacing)一个是单词间距(word-spacing),大同小异。据我测试,word-spacing的负值只要大到一定程度,其兼容性上的差异就可以被忽略。因为,貌似,word-spacing即使负值很大,也不会发生重叠。

  • 相关阅读:
    LeetCode "Jump Game"
    LeetCode "Pow(x,n)"
    LeetCode "Reverse Linked List II"
    LeetCode "Unique Binary Search Trees II"
    LeetCode "Combination Sum II"
    LeetCode "Divide Two Integers"
    LeetCode "First Missing Positive"
    LeetCode "Clone Graph"
    LeetCode "Decode Ways"
    LeetCode "Combinations"
  • 原文地址:https://www.cnblogs.com/leena/p/6930175.html
Copyright © 2011-2022 走看看