为什么浏览器中的文本区域下方有额外的空间？-css教程-PHP中文网

为什么浏览器中的文本区域下方有额外的空间？

Barbara Streisand

发布： 2024-11-05 12:20:02

原创

1078 人浏览过

Why Does a Textarea Have Extra Space Below It in Browsers?

消除浏览器中 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中文网其他相关文章！