0:00 / 0:00
排版

CSS 文本框修剪

去除文本上下的额外空间,以实现可预测的间距。

CSS text-box-trim 属性与 trim-both cap alphabetic 一起使用,可以去除浏览器传统上添加的文本上下内置间距。这创造了更可预测和精确的垂直间距,对于像素完美的用户界面对齐尤为重要。

为什么这很重要

设计师们长期以来一直在与浏览器在大写字母上方和基线下方添加的不可见空间作斗争。这个新的 CSS 特性为开发者提供了对文本框边界的精细控制,使得更容易:

  • 垂直对齐文本与相邻元素
  • 在按钮和徽章中创建一致的间距
  • 构建更紧凑的排版布局,而无需变通方法

它是如何工作的

text-box-trim: trim-both 值去除了文本框上下的额外空间,而 cap alphabetic 则根据大写字母的高度(cap)和字母基线定义修剪边缘。

css
.trimmed-text {
	text-box-trim: trim-both cap alphabetic;
}

这个 CSS 特性代表了网页开发者在排版控制方面的重大改进,消除了对负边距或其他变通解决方案的需求。

Rene WangRene Wang·

继续探索

描述链接操作

Safari 比 Chrome 更出色的一件事

可访问性
We Regulary Update this List

You can get notified by subscribing to our biweekly newsletter. No ads, no spam, just new content.

Profile banner
Detail

Detail

@detaildotdesign

about.x.bio

10+about.x.exclusiveContent
160+about.x.followers