DIV 和 TEXTAREA 元素'width' CSS 属性的解释不同？

Question

下一个HTML代码时有点困惑

<div>Some text insize DIV</div>
<textarea>Some text insize TEXTAREA</textarea>

使用CSS

div {
    background-color: #eee;
    width: 25em;
}
textarea {
    width: 25em;
}

显示不同宽度的DIV和文本区域...原因是什么？

JSFiddle 示例在这里

Answer 1

em s是基于font-size测量的，每个元素都有不同的字体大小。div是font-size: 16px的，textarea至少font-size: 11px为Chrome中的默认设置。

如果将元素设置为相同的font-size则它们的宽度几乎相同。剩下的区别是因为textarea也有填充和边框。

如果将 CSS 设置为此，则元素的大小将相同：

div {
    background-color: #eee;
    width: 25em;
    font-size: 16px;
    box-sizing: border-box;
}
textarea {
    width: 25em;
    font-size: 16px;
    box-sizing: border-box;
}

因为它们都具有相同的字体大小，并且宽度将基于边框而不是内容框，因此填充和边框将包含在宽度中。

---

引用：

• 字体大小的ems（Mozilla开发者网络）
• 盒子尺寸（Mozilla 开发者网络）

Answer 2

这是因为这两个元素具有不同的默认font-size属性，并且em单位基于您将其分配给的任何元素的默认字体大小。

这里有一个小提琴显示了差异：

https://jsfiddle.net/j985xpmq/1/

这里有一个小提琴，向他们展示了相同的内容：

https://jsfiddle.net/j985xpmq/4/

您会注意到我从textarea中删除了填充，并在div中添加了边框

Answer 3

为了进一步证明 zfrisch 的正确答案，这几乎是相等的：

div {
    background-color: #eee;
    width: 25em;
   font-size:14px;
}
textarea {
    width: 25em;
    font-size:14px;
}

每个元素的默认字体缩放都保持不变，并且<textarea>框还具有默认填充功能，因此与div 宽度的大小仍然略有不同，但它们现在非常接近。

https://jsfiddle.net/j985xpmq/3/