為什麼我的文字區域下方有多餘的空間？

文字區域下方的額外空格：原因和解決方案

問題：

問題：

儘管使用簡單的標記，額外的垂直空間出現在 下方各種網頁瀏覽器中的元素，範圍從1 到4 像素。

<code class="html">
    
        <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>
    
</code>

程式碼片段：

原因：

多餘的空間是由預設方式造成對齊的元素，被分類為內聯（或內聯塊）元素。此間隙是為下面文本中的潛在下伸部分保留的。

解決方案：

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

要消除多餘的空間，請將以下 CSS 規則加入您的 中。 elements:這會將 <textarea> 對齊到其容器的頂部，有效地消除了額外的間距。

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