CSS中inline-block产生的间隙

最新推荐文章于 2023-01-15 20:27:20 发布
原创 最新推荐文章于 2023-01-15 20:27:20 发布 · 265 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#CSS

博客介绍了将标签的display属性设为inline-block时，标签间会出现小空隙。分析了间隙产生原因是浏览器会将连续空白符解析为一个空格，还给出取消间隙的方法，如给父级设置属性，或删掉标签间空格，作者倾向第一种方法。
把标签的display属性设置为inline-block时，会产生如下效果，两个标签之间会存在一个小小的空隙：

在这里插入图片描述
于是我查询了一下，间隙产生的原因是inline-block对外是inline，对内是block。
inline会将连续的空白符解析为一个空格。取消间隙的方法如下：

  • 给父级设置一个font-size:0的属性。
  • 将两个标签之间的空格删掉写成<span>2</span><span>3</span><span>4</span>相连的样式，但是这样的代码不是很好，所以我更倾向于采用第一种写法。
HarryMing
关注
css解决display:inline-block;产生的缝隙（间隙）的方法
09-27
本篇文章主要介绍了css解决display:inline-block;产生的缝隙（间隙）的方法，具有一定的参考价值，有需要的可以了解一下。
详解CSS 去掉inline-block元素间隙的几种方法
12-13
inline-block 即内联块,在CSS的元素分类中可以分成三种：行内元素或者内联元素、块级元素、以及内联块元素。 内联块元素具有了内联元素以及块级元素的特性：（1）元素之间可以水平排列 （2）可以当做一个块级元素来...
display:inline-block引发的间隙思考
weixin_33874713的博客
06-26 168
一、导火线 没错，总有一类属性在助你轻松寻得捷径的同时，也可为你增添烦劳，比如本文的主谋display:inline-block。众前端们所诸知，其作用是将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。然而不幸的是，它并没有得到所有浏览器的支持，比如ie6、7和古老一点的firefox完全无视它，由于firefox的老版本几乎已经从市场中消失，...
[CSS] inline-block间隙
Agumr的博客
11-13 336
inline-block间隙 在给 li 设置inline-block 属性的时候，发现在li元素之间有一道间隙 <style type="text/css"> body,div,h1,ul,li{margin:0; padding:0;} ul,li{list-style:none;} .nav a{background: red;color:#fff;padding: 5px 10px;} .nav ul li{display:inline-block;} &
inline-block布局产生间隙
qq_41898220的博客
05-31 445
布局的一种方法是使用display:inline-block;它相比于与浮动、定位最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以置身于inline水平的元素中。但是在使用display:inline-block列表布局经常会遇到“换行符/空格间隙问题”。 .top>.logo>.nav { float: right; line-height: 106px; } .top
inline-block元素间的间隙问题
Missing27的专栏
05-21 935
inline-block的去除方法
Firefox Bug: inline/inline-block的间隙采用代码缩进可解决
09-25
然而，`inline-block` 在不同浏览器间存在兼容性问题，特别是在Firefox中有一个知名的bug，表现为相邻的`inline-block`元素之间会有一段看似多余的空白间隙，通常为6像素。这个问题同样存在于IE8，但不适用于更早...
css几种解决inline-block间隙的方案(整理)
12-02
为了弥补inline和block的不足，又扩充了inline-block属性； inline-blcok可以将对象呈递为内联对象，而内容作为块对象呈递。 通俗点讲就是“可定宽高的堆在一起”显示 为什么会有间隙 inline-blcok块之间的不可见...
CSS之消除inline-block之间产生的间隙
MAXLZ的博客
12-09 322
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; dl{
inline-block布局产生间隙的原因及解决办法（水平、垂直）
热门推荐
gladys_1111的博客
08-16 1万+
布局的一种方法是使用display:inline-block;它相比于与浮动、定位最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以可以置身于inline水平的元素中。但是在使用display:inline-block列表布局经常会遇到“换行符/空格间隙问题”。如下：<!DOCTYPE htm
inline-block之间间隙问题
HaiMianDanKe的博客
01-11 619
有时候标签设置了：display:inline-block时，标签之间会产生莫名的间隙，即使设置了margin:0，间隙仍然存在。例如html代码：<ul> <li><a href="#">11</a></li> <li><a href="#">22</a></li> <li><a href="#">33</a></li> <li><a href="#">44</a>
inline-block左右间隙问题
weixin_44574502的博客
02-22 189
<div></div> // <- 祸根：这里的空格被识别了 <div></div> .inline-block { font-size: 0; word-spacing: 0; display: table; }
inline-block布局出现间隙问题
云影杳杳的博客
09-17 678
inline-block引发间隙是包括换行在内的空白符。 问题1：上边距产生1px间距（如图）。 1.完美解决方案： 设置vertical-align:top。（vertical-align这个是设置元素的垂直排列的， 用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐；top就是垂直对齐文本的顶部 。） 2.不完美解决方案： 整个div设置height
inline-block并排显示存在间隙
lxp_1101的博客
09-18 731
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; *{ padding:0; margin:0; } div{ display:inline-block; height:200px; } .c1{ width:50%; ba...
使用display: inline-block的间隙问题
死肥仔Meiko
08-01 739
解决display: inline-block 下 元素之间有间距的问题 在某种情况下 , 不想使用浮动方法 , 又要考虑兼容的情况下 。通常我们会使用 display: inline-block 来使元素处于并排显示, 会遇上这样的情况   * { padding: 0px; margin: 0px; } body { padding-top: 100px; ...
inline-block 排列的中间间隙问题
weixin_41514525的博客
05-15 421
两个inline-block的块没有设置外边距但却有着中间的缝隙。。。。。。。 对于两个inline-block 同一行的时候，会出现间隙。 对于这个间隙可以通过去掉将HTML中两个块对应的代码中间的空格来去除两个块中的间隙 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g...
css：inline-block 的 div 之间的空隙，原因及解决
ZFDEXX的博客
01-15 780
css基础
两个inline-block中间有空白，解决inline-block 元素之间的空白问题
wangchaoqi1985的博客
10-23 339
两个inline-block中间有空白，解决inline-block 元素之间的空白问题
inline-block产生空白间隙的问题 解决方法
HZ___ZH的博客
03-01 634
当我们在对元素的display属性使用inline-block值时，会在元素间形成一定宽度的空白间距: <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> </ul> *{ margin: 0; paddi
css设置inline-block有间隙
最新发布
03-20
### CSS `inline-block` 元素间间隙的原因 当两个 HTML 元素被设置为 `display: inline-block` 后，它们之间的空白字符（如空格、制表符或换行符）会被浏览器解析成单个空格[^1]。这种行为源于 `inline-block` 的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值