css font-size 的妙用

今天在写这个样式的时候

在这里插入代码片.highlighted-title {display: inline;/* 文字下半部分带橙色底色的荧光笔效果 */background: linear-gradient(to bottom, transparent 0%, transparent 60%, /* 前60%透明 */ rgba(195, 114, 28, 0.3) 60%, /* 从60%开始橙色 */ rgba(195, 114, 28, 0.3) 100% /* 到底部都是橙色 */);line-height: 1.6; /* 增加行高让效果更明显 *//* 移除默认的 ::after 伪元素 */&::after {display: none;}
}

发现 文字之间多了一块很大的的空间,

解决方案:父元素添加font-size:0

font-size: 0 是一个常见的 CSS 技巧，主要用于解决行内元素（如 inline-block 元素）之间的默认空白间隙问题。以下是详细说明：

一、核心作用原理
​消除空白间隙​：浏览器会将 HTML 代码中的换行符、空格等渲染为文本节点，导致行内元素之间产生约 4px 的空白间隙。设置 font-size: 0后，父元素的字体大小变为 0，从而消除这些空白节点的视觉占用。
​不影响子元素字体​：子元素可独立设置 font-size恢复文字大小，父元素的 font-size: 0不会继承给已明确设置字体的子元素。