css font-size 的妙用

weixin_427771612025-11-10 23:28

今天在写这个样式的时候

复制代码

在这里插入代码片.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不会继承给已明确设置字体的子元素。