inline-block产生空白节点的解决方法

最新推荐文章于 2023-04-22 20:05:13 发布

原创最新推荐文章于 2023-04-22 20:05:13 发布 · 301 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

62 篇文章

订阅专栏

本文介绍了解决HTML内联元素间距问题的两种有效方法：一是通过设置父元素的font-size为0；二是调整DOM结构，使连续的内联元素紧密相连。这两种方法能帮助开发者优化网页布局，实现更精确的页面设计。

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

<div class="set">
  <span>a</span>
  <span>b</span>
  </div>

常用两种方法：
1.设置父元素font-size:0
2.将DOM结构改为

<div class="set">
  <span>a</span><span>b</span>
  </div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

tcap99

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

inline-block间距产生的原因，去除inline-block间距的方法？及这个问题未来可能的解决方向。

IT修真院：初学者转行到互联网的聚集地

05-13

942

这里是修真院web小课堂，每篇分享文从【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】八个方面深度解web知识/技能，本篇分享的是：【 inline-block间距产生的原因，去除inline-block间距的方法？及这个问题未来可能的解决方向。】大家好，我是IT修真院深圳分院第3期的学员，一枚正直纯洁善良的前端程序员，今天给大家...

常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别？

IT修真院：初学者转行到互联网的聚集地

05-21

1351

这里是修真院前端小课堂，本篇分析的主题是【常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别？】大家好，我是IT修真院深圳分院第3期的学员，一枚正直纯洁善良的前端程序员，今天给大家分享一下，修真院官网前端工程师（职业）css任务1，深度思考中的知识点——常见的inline元素、block元素、inline-block元素有哪些？它们之间有什...

参与评论您还未登录，请先登录后发表或查看评论

有关display:inline-block在FF出现空白的解决方案

03-17

NULL 博文链接：https://qiyan86-163-com.iteye.com/blog/551754

display:inline-block的bug 空白节点

aogy04408的博客

08-14

148

display:inline-block的bug 当有空白节点出现的时候，就会有很大的间隙： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="...

关于inline-block会造成空白间隙的解决方案

weixin_41350225的博客

11-29

607

关于inline-block会造成空白间隙的解决方案 display:inline-block会造成空白间隙，只有当这个完全挨着时，空白的间隙才会消失，如果有空隙的存在，20%宽度+空隙宽度+80%宽度 > 100%宽度，会造成第二个div另起一行布局空隙产生原因： HTML中的换行符、空格符、制表符等空白符，字体大小不为0的情况下，空白符占据一定宽度，使用inline-block会产生...

display：inline-block引发的空白间隔问题

qq_34309704的博客

08-09

1246

1、li标签举例为了让li在一行显示，并且可以设置宽高，我们设置li的display：inline-block，这时<li>之间会出现8px的空白间隔。如下所示：代码如下： html: <ul> <li class = "a">a</li> <li class = "b">b</li&amp

css之幽灵空白节点

weixin_33946605的博客

04-07

773

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Comp...

5种方法快速去掉HTML中Inline-Block的空白

09-28

由于`inline-block`元素间的空白是由文本节点造成的，将父元素的`font-size`设置为0可以消除这部分空白。然后，为子元素恢复合适的字体大小： ```css .inline-block-list { font-size: 0; } .inline-block-...

display属性理解： inline ， block， inline-block+BFC格式上下文、盒模型

hhhh

04-28

698

display的常用的属性值，inline ， block， inline-block 块级元素总是从新行开始 width、height、margin、padding都可以控制宽度默认是页面的100% 可以容纳内联元素和其他块元素 <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> <di

display: inline-block

05-06

### CSS `display: inline-block` 的用法及常见问题 #### 一、基本概念 `display: inline-block` 是一种用于控制 HTML 元素显示方式的 CSS 属性值。它结合了 `inline` 和 `block` 显示模式的特点，使得元素既可以在...

在设置li标签display:inline-block;属性后，li之间出现大约8px的空白间隙的原因

测试喵~

07-03

3572

最近写页面时遇到了一个bug,就是将<li>标签设置display:inline-block;属性后，<li>之间出现大约8px的空白间隙，导致页面变得不如理想中那么完美，解决问题后将方法分享出来，希望能帮到有需要的小伙伴。原因分析：浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，也就是我们上面的代码<li>换行后会产生换行字符...

html中空白节点属性,css进阶之十一：内联盒模型中的幽灵空白节点

weixin_34336527的博客

06-05

431

“幽灵空白节点”是内联盒模型中非常重要的一个概念，具体指的是：在 HTML5 文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。这个“空白节点”永远透明，不占据任何宽度，看不见也无法通过脚本获取，就好像幽灵一样，但又确确实实地存在，表现如同文本节点一样，因此，我称之为“幽灵空白节点”。注意，这里有一个前提，文档声明必须是 HTML5 文档声明(HTML 代码如...

行内块（inline-block）元素之间的空白

zd375005009的博客

04-02

792

<nav class="nav-tab"> <a>推荐</a> <a>排行榜</a> <a>搜索</a> </nav> .nav-tab a{ display: inline-block; width: 30%; font-size:1rem; ...

CSS——inline-block引起的空白间隙

where_slr的博客

03-04

402

使用display:inline-block；布局时，如果遇到换行/空格符等其他字符时，会有出现空白间隙； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport&qu

解决使用 inline-block 引起的空白间隙问题

weixin_34418883的博客

03-05

232

一、解决方法 1. css方法（1）给父级元素设置font-size: 0; // html <div class='third'> <div class='first-div'></div> <div class='second-div'></div> <div class='third-div'>...

内联元素之幽灵空白节点

原鑫的个人博客

10-09

714

内联元素之幽灵空白节点当元素内部嵌套内联样式产生的vertical-align和line-height搞基现象 vertical-align默认值是baseline <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="v

CSS中的幽灵空白节点

zz13268570834的博客

04-22

821

幽灵空白节点是指在使用行内块元素进行布局时, 页面上会出现一个不可见的隐藏元素, 对我们的布局会产生一些影响。我们新建一个html文件, 在div盒子中放置一个span行内元素, 此时页面上的div元素是不可见的, 因为没有任何元素能够将div元素撑开接着我们将span元素的display设置为inline-block, div盒子竟然被撑开了;

解决img标签的间隙：幽灵空白节点

拎着蜗牛跑的壳儿

11-29

2102

一 - 解决img标签的间隙：幽灵空白节点 1.1 - 引入：因为 img 标签的基线就是图片的底部，那么一行文字包括当前行内的图片都是基于基线对齐的。但是图片的基线和底线是重合的，所以图片下边是由空隙留给文字的底线和基线之间的距离但是为什么明明没有书写文字，仍然会有间隙呢？ —其实浏览器在渲染过程中，会在空白的地方渲染一个没有宽度和高度的节点这个节点被称作为幽灵空白节点所以简单概...

解决空白幽灵节点

认真学习前端的博客

03-04

612

解决空白幽灵节点

htmldisplay: inline-block;