display:inline-block 产生空隙问题

最新推荐文章于 2024-09-08 22:57:34 发布
最新推荐文章于 2024-09-08 22:57:34 发布
阅读量317 收藏
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_24270109/article/details/104094920
版权
本文探讨了CSS中display:inline-block元素之间产生空隙的原因，这主要是由于元素间的空白符导致的。当元素的font-size不为0时，空白符会产生一定的间距，并且该间距会随字体大小变化。解决这个问题的方法包括设置父元素的white-space属性为nowrap，或者直接删除HTML代码中的空白符。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Display:inline-block 产生空隙问题

在这里插入图片描述

1.产生原因:元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。

2.解决方法1:
在这里插入图片描述

父元素添加：

.par {
  display: table;
  word-spacing: -1em;
}

解决方法2:消除html代码中的空白

<div class="par">
  <span>aaa</span><span>bbb</span>
</div>
使用 display:inline-block 会产生什么问题？有什么解决方法？
越陌度阡
11-11 556
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .
【CSS基础—No.03】消除display: inline-block产生的间隙
Chailo的博客
11-21 1343
如果你举例子尝试的话会发现一个问题，display: inline-block元素垂直和水平方向也会产生一个间隙，而这个间隙在实际开发中会让我们的页面不那么严谨。
css解决display:inline-block;产生的缝隙（间隙）的方法
09-27
本篇文章主要介绍了css解决display:inline-block;产生的缝隙（间隙）的方法，具有一定的参考价值，有需要的可以了解一下。
display:inline-block元素之间空隙的产生原因和解决办法
热门推荐
qq_32614411的博客
08-30 3万+
display:inline-block是一种布局方法，它相比于与浮动、定位最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以置身于inline水平的元素中。 在CSS布局中，如果我们想要将一些元素在同一行显示，其中的一种方法就是把要同行显示的元素设置display属性为inline-bl...
display为inline-block的元素中间有间隙的原因和解决办法
my466879168的博客
03-11 3143
display为inline-block的元素在水平方向上之间会有间隙 原因：标签与标签之间使用了空格或者是换行符(空白字符也是字符，样式会影响) 解决办法一： 不使用空白符号，使用注释替代换行、标签的结束标签与开始标签写在一起等（代码的可读性较差） 解决办法二：设置父元素的font-size为0，子元素重新设置字体大小（增加了代码量） 解决办法三：使用负的margin-left（空隙是由上下文...
display:inline-block导致元素之间出现空隙
最新发布
HZC0217的博客
09-08 445
这是因为inline-block元素间有空格或是换行，空格符与’a’，‘b’，‘c’，'d’这些字符一样，本质上就是个字符，只不过因为空格是透明的看不见而已（但可以选中）。所以，只要让文字宽度为0，就可以解决inline-block元素间换行符间隙的问题。在CSS中如果想要将几个元素显示在同一行，其中的一种方法就是给要同行显示的元素设置display:inline-block属性。方法二：给父元素设置font-size: 0属性。方法一：干掉元素之间的空白符。
display:inline、block、inline-block的区别（转的）
08-07
本篇文章将深入探讨`display:inline`、`display:block`以及`display:inline-block`这三种主要的显示模式之间的区别，帮助你更好地理解它们在实际开发中的应用。 首先，我们来看`display:inline`。这种模式使得元素...
记录：两个display: inline-block;内联块元素之间的空隙问题
汪同学丶的博客
01-05 2467
举例：inline-block之间存在空隙 html: &amp;lt;div class=&quot;example&quot;&amp;gt; &amp;lt;span&amp;gt;inline-block之间存在空隙&amp;lt;/span&amp;gt; &amp;lt;span&amp;gt;inline-block之间存在空隙&amp;lt;/span&amp;gt; &amp;lt;
css div等块元素设置display:inline-block存在间隙问题
ScottePerk的博客
12-12 2017
需要重新设置子元素的font-size。而且会出现下面元素下移的情况。**也会出现元素下移的情况。只是每个子元素都要设置float，有一点点麻烦。如果设置inline-block后，又设置float，还是会有空格。也就是这里的间隙实际上是来自div和div之间的换行转变成空格导致的。可以包裹一个空的父元素，就为了解决这个问题。我们给块元素例如div设置display:inline-block，会发现元素之间存在空隙。父元素里面的内容也是会影响。可以包裹一个空的父元素，就为了解决这个问题。
display:inline-block间隙产生的原因以及解决方案
yiyueqinghui的博客
06-30 497
解决方案： 1.将html标签要display:inline-block 的元素写在一行。缺点：代码可读性差。 <body> <div class="spa">wade</div><div class="spa">james</div><div class="spa">rose</div> </body> 2.给父元素设置font-size:0,给子元素设置需要的font-size值 缺点:是子元素如果里面有文
css解决display:inline-block;产生的缝隙（间隙）
codingWeb的博客
07-13 4860
display：inline-block的缝隙 <style type="text/css"> *{ border: 0; padding: 0; margin: 0; } ul li{ display: inline-block; border: 1px solid #000000; } </style...
为什么display：inline-block的元素之间会有空格
qq_43654065的博客
04-13 1614
在页面布局中，我们需要将一些元素显示在同一行，其中一种方法就是设置display：inline-block，但是在这些同行显示的inline-block元素之间的会出现空隙。 原因： 元素被当成行内元素排版时，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，空白会被浏览器忽略），HTML代码中的回车换行被转成一个空白符，在字体不为0 的情况下，空白符占据一定的宽度，所以inline-block元素之间就出现了空隙。 解决方法： 删除HTML中
Vue中设置 display:inline-block;有上下和左右缝隙解决
ioszhanghui的博客
07-12 5789
如果在元素上设置，display样式为inline-block,可能会产生左右的边距，和上下的边距,产生的结果如下图所示， 示例代码： <html> <head> </head> <style type="text/css"> *{margin:0; padding:0;} .test{ w...
解决元素display:inline-block间隙问题
sinat_37680470的博客
03-27 598
设置元素display：inline-block的时候，元素之间会有间隙，并且父级的高度不是右自己撑开的。一个很简单的解决方案就是给父级设置font-size：0；//html &lt;div class="main"&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt
display:inline-block;会使得两个标签之间显示空隙怎么解决
hn_zhaoyu
05-27 305
注释：display:inline-block;让块级元素变成行内块级元素，ie6、ie7以及一些老的浏览器不支持 /* *父元素设置font-size:0; *移除标签之间的换行和空格 *使用margin负值 **letter-spacing为每个字符之间的空白距离， **word-spacing为单词之间的空白距离 /*** ...
【css】消除display: inline-block元素之间空隙的方法
smart_dream
11-29 958
问题： .goods-list{background-color: #f3fbfe; padding: 10px 20px;} .good-msg span{display: inline-block;width: 10%;} .good-msg .p-name{width: 60%;} .good-msg .p-price{color: #e4393c;font-weight: bol...
CSS深度解析：display:inline-block属性及空隙问题解决方案
"深入解析CSS的display:inline-block属性的使用，包括其在处理空隙问题上的解决方案，以及在不同浏览器下的兼容性策略。" 在CSS布局中，`display:inline-block`属性是一个非常重要的概念，它结合了`display:block`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值