HTML/CSS Textarea 和 Div 高度不同

Question

我已经为文本区域设置了最小/最大宽度和最小高度的样式（以允许垂直缩放，但不能在其他方向上缩放），并在其旁边放置一个具有相同高度的 div。出于某种原因，尽管 CSS 没有说谎，但它们的高度不同。任何人都知道为什么以及是否有办法解决这个问题而不是调整任一元素的高度？

CSS：

#textarea {
    float: left;
    display: block;
    margin-left: 30px;
    min-width: 300px;
    max-width: 300px;
    min-height: 200px;
    border: 1px dashed black;
}
#output {
    float: left;
    display: block;
    margin-left: 30px;
    width: 300px;
    height: 200px;
    border: 1px dashed black;
}

Fiddle

Answer 1

在大多数浏览器中，textarea 元素具有默认填充。

在 Chrome 中，元素的每一侧都有2px 的填充，而在 IE/FF 中，它的每一侧都有1px 的填充。如果您希望两个元素具有相同的高度，则需要删除填充：

Updated Example

#textarea {
    padding: 0;
    float: left;
    display: block;
    margin-left: 30px;
    min-width: 300px;
    max-width: 300px;
    min-height: 200px;
    border: 1px dashed black;
}

---

您还可以通过更改box-sizing to border-box 来更改box model 以在宽度/高度计算中包含元素的填充/边框：

Updated Example

#output, #textarea {
    box-sizing: border-box;
}