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和TEXTAREA ......原因是什么？

JSFiddle示例here

Answer 1

em是基于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;
}

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

参考文献：

Answer 2

这是因为这两个元素具有不同的默认reduce属性，font-size单位基于您为其指定的任何元素的默认字体大小。

这是一个显示差异的小提琴：

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

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

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

您会注意到我从em移除了填充，并为textarea添加了边框

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/

DIV和TEXTAREA元素解释宽度＆＃39; CSS属性有何不同？

3 个答案: