HTML/CSS Textarea 和 Div 高度不同

Question

我用 min/max 宽度和最小高度设置了文本区域的样式（以允许垂直缩放，但不能在其他方向上缩放），并在其旁边放置一个具有相同高度的 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 model to include the element's padding/border in the width/height calculations by changing box-sizing to border-box:

Updated Example

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

HTML/CSS Textarea 和 Div 高度不同

HTML/CSS Textarea and Div are different height

html

css

textarea