inline 或 inline-block 元素间的间隙

LdhAndroid 发布于2019-08-02 16:07 / 1925人阅读

摘要：当您将元素显示值设置为内联或内联块时，您通常会在元素之间看到默认的空格。如果您不想要设计中的空格，可以通过多种方法将其删除。

当您将元素显示值设置为内联或内联块时，您通常会在元素之间看到默认的空格。如果您不想要设计中的空格，可以通过多种方法将其删除。

示例代码：


    inline
    inline-block

body {
    margin:0;
}
ul {
    /*font-size: 40px;*/
    list-style:none;
    margin: 0;
    padding:0;
}
ul li {
    display: inline-block;
    border: 1px solid #ccc;  //  设置边框方便查询
}

解决方案 方法一：通过利用负边距，达到删除空隙

更改上述代码：

ul li + li {
    margin-left: -5px;
}

这应该常用一种方式；但是这种方式会受祖先容器字体大小影响，如果字体越大其间隙越大，也就不是上述提供 -5px，就能达到删除空隙了；

可以通过JS辅助验证，空隙是否跟字体大小有关：

// 字体大小设置为 16px 情况下：
var first = document.querySelector("#first");
var last = document.querySelector("#last");

var c1 = first.getBoundingClientRect();
var c2 = last.getBoundingClientRect();

var gapWidth = c2.left - c1.width;
// gapWidth =>  4.732177734375
// 所以我们前面设置 -5px 原因， 因为CSS不支持小数点，所以才向上取整；


// 字体大小设置为 32px 情况下：
var first = document.querySelector("#first");
var last = document.querySelector("#last");

var c1 = first.getBoundingClientRect();
var c2 = last.getBoundingClientRect();

var gapWidth = c2.left - c1.width;
// gapWidth =>  9.46435546875
// 那么我们前面设置 -5px ，就会失效了

了解 getBoundingClientRect 使用，大家可以点击这里查看：

方法二：删除元素之间前后间隙


    inline
inline-block

方法三：把父元素 font-size:0，其子元素再重新指定字体大小

ul {
    list-style:none;
    margin: 0;
    padding:0;
    font-size:0;
}
ul li {
    display: inline-block;
    border: 1px solid #ccc;  //  设置边框方便查询
    font-size: 16px;
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54692.html

inline 或 inline-block 元素间的间隙

摘要：当您将元素显示值设置为内联或内联块时，您通常会在元素之间看到默认的空格。如果您不想要设计中的空格，可以通过多种方法将其删除。当您将元素显示值设置为内联或内联块时，您通常会在元素之间看到默认的空格。如果您不想要设计中的空格，可以通过多种方法将其删除。示例代码： inline inline-block body { margin:0; } ul { ...

elva 2019-08-30 15:54 评论0 收藏0
深入理解-CSS内联元素之line-height

摘要：常见问题这一部分我们来说一说常见的内联元素的一些问题。通过设置为，或者使用属性，都可以达到去除内联元素之间的间隙的目的。 showImg(https://segmentfault.com/img/remote/1460000014515131?w=1280&h=608); 上一篇文章我们讨论了font-size，这一篇来说另一个与文字关系密切的属性line-height。这里涉及到了内...

wapeyang 2019-08-29 15:06 评论0 收藏0
深入理解-CSS内联元素之line-height

摘要：常见问题这一部分我们来说一说常见的内联元素的一些问题。通过设置为，或者使用属性，都可以达到去除内联元素之间的间隙的目的。 showImg(https://segmentfault.com/img/remote/1460000014515131?w=1280&h=608); 上一篇文章我们讨论了font-size，这一篇来说另一个与文字关系密切的属性line-height。这里涉及到了内...

邹强 2019-08-02 10:15 评论0 收藏0
CSS魔法堂："那不是bug，是你不懂我!" by inline-block

摘要：那不是，是我不懂而已。的用途之一西文是以空格来分隔单词的，而汉字间则无需空格分隔，但为了统一西文东亚和的排版，于是抽象出一个名为的概念用于分隔词义单元，则作为的值域，而定义域就是语言信息。前言每当来个需要既要水平排版又要设置固定高宽时，我就会想起display:inline-block，还有为了支持IE5.5/6/7的hack*display:inline;*zoom:1;。然后发...

cucumber 2019-08-30 12:56 评论0 收藏0