资讯专栏INFORMATION COLUMN

inline 或 inline-block 元素间的间隙

LdhAndroid / 1932人阅读

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

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

示例代码:

  • 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 评论0 收藏0
  • 深入理解-CSS内联元素之line-height

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

    wapeyang 评论0 收藏0
  • 深入理解-CSS内联元素之line-height

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

    邹强 评论0 收藏0
  • CSS魔法堂:"那不是bug,是你不懂我!" by inline-block

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

    cucumber 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<