UA 默认样式与 rows 属性

配方的每一条声明都不是写在空白上的。<textarea> 在作者样式介入之前已经有完整的尺寸、字体与交互行为，其中一部分来自 HTML 属性、一部分来自 UA stylesheet，还有一部分在真实项目里早已被框架的 reset 改写过。本页先把这三层读出来。

1 · cols 与 rows 给出的初始尺寸

<textarea> 的尺寸有一个 CSS 之外的来源：cols 与 rows 两个属性。规范给它们的默认值分别是 20 与 2，含义是「宽度容得下 20 个平均字符、高度容得下 2 行」。这是 HTML 属性直接参与布局计算的少数场合之一。

一个不带任何属性、不受任何作者样式影响的 <textarea>，边框盒实测 183×36px（Chrome 152，核对于 2026-09）。高度可以逐项对上：2 行 × 15px 行高 + 上下 padding 各 2px + 上下 border 各 1px。宽度则不是 20 乘以某个整数——它取的是当前字体的平均字符宽，随字体而变。

2 · UA stylesheet 给出的其余取值

尺寸之外的形态全部来自 UA stylesheet。Chrome 152 下读回的计算值如下（核对于 2026-09）：

• display: inline-block——外部显示类型是 inline，控件因此参与行框布局，底部会留出一条基线间隙
• font-family: monospace、font-size: 13.3333px、line-height: normal——字体不继承页面正文，字号约等于根字号的 ${5}/6$
• white-space: pre-wrap、overflow-wrap: break-word——换行符保留，长单词强制断行
• resize: both——resize 属性的 initial value 是 none，both 是 UA 给 <textarea> 的
• box-sizing: content-box——UA stylesheet 并未改动它，这一条与 initial value 相同

3 · 框架 reset 改写过的「默认」

上面那份读数有一个前提：页面上没有任何作者样式命中 <textarea>。真实项目里这个前提几乎不成立。本站的全站基线引入了 Tailwind 的 preflight，落到 <textarea> 上的实测结果是四处改写：box-sizing 变成 border-box（经 * 选择器）、字体变成继承的 16px 正文字体（font: inherit）、resize 只剩 vertical、padding 与 border-width 一并清零。四处都落在 author origin，优先级压过 UA stylesheet。

于是图 2-1 里的两列读数几乎处处不同：右列的字体是页面正文字体、盒模型是 border-box、resize 只剩纵向、padding 与 border 归零。本页所有 demo 控件因此都从 all: revert 起步——它把该元素上的全部 author 声明撤回，退到 UA origin，这样量到的才是读者在一个未加 reset 的页面里会看到的值。这一步不是排版细节：不撤 preflight，本页正文里的 13.3333px 与 content-box 在页面上一个都验不出来。

配方的第一条声明 box-sizing: unset 正是冲着这一层来的。它要撤销的从来不是 UA stylesheet，而是项目自己的 reset——详见 box-sizing 与 reset 的冲突。