Question

我设计了一个具有最小/最大宽度和最小高度的textarea（允许垂直缩放，但没有其他方向），并在其旁边放置一个高度相同的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来更改box-sizing to border-box以在宽度/高度计算中包含元素的填充/边框：

Updated Example

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

HTML / CSS Textarea和Div的高度不同

1 个答案: