代码之家 › 专栏 › 技术社区 › Nathan Ridley

CSS:为什么减小相邻内联元素的字体大小会增加整体的前导?

css

Nathan Ridley · 技术社区 · 14 年前

我有一个元素,它包含两个span标记,每个span标记都包含一些文本。container元素设置字体大小,然后将第二个span标记上的字体大小设置为较低的大小。当第二个跨距减小字体大小时,行和下一个块元素之间的空间将增大。这发生在WebKit和Gecko中。

这个 p { margin-bottom: 0; padding-bottom: 10px; } 它的下一个兄弟 { margin-top: -5px; }

下图说明了这种情况,并包含FireBug中文档结构相关部分的快照。

alt text

为什么在减小第二个span标记的字体大小后,p标记下面的间距会增加?

1 回复 | 直到 8 年前

babtek 14 年前

我的猜测是,小数跨度(可能是32px?)继承了一个(相对)较大的行高,当您将字体大小减小到18px时,会出现这样一种情况:小数标志符的基线与非小数标志符匹配,但该行仍必须占用指定的完整行高。因此,在基线下添加了额外的空间。

添加一条线高度规则,我敢打赌这会消失:

.box .value > .decimal { line-height: 18px; }

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前