HTML/CSS Textarea和Div是不同的高度

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; 
}