為什麼瀏覽器中的文字區域下方有額外的空間？

消除瀏覽器中Textarea 下方的額外空間

使用textarea HTML 元素時，其下方可能會出現不需要的額外空間，大小各異跨瀏覽器從1 到4 像素。儘管使用了簡單的標記，這個問題仍然存在。

`

<style>
    body {
        margin: 0;
        padding: 0;
    }
    .main {
        background-color: red;
    }
    textarea {
        background-color: gray;
        resize: none;
        margin: 0;
        border: 0 none;
        padding: 10px;
        height: 50px;
        overflow: hidden;
    }
</style>

<div class="main">
    <textarea></textarea>
</div>

`

此標記在各種瀏覽器中呈現時，會顯示文字區域下方的額外空間。為了解決這個問題，有必要了解，作為一個內聯元素，textarea 為文本中的下行元素保留了空間。然而，瀏覽器之間間隙變化的確切原因仍然未知。

要有效消除這種額外空間，請添加vertical-align: top;添加到CSS 中的文字區域：

<code class="css">textarea {
    ...
    vertical-align: top;
    ...
}</code>

透過實施此修改，文字區域將與其父元素的頂部對齊，從而有效地刪除不需要的空間。

以上是為什麼瀏覽器中的文字區域下方有額外的空間？的詳細內容。更多資訊請關注PHP中文網其他相關文章！