在text_rea标签下有一些额外的空格.在不同的浏览器中从1到4像素.标记非常简单:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
    <head>
        <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>
    </head>
    <body>
        <div class="main">
            <textarea></textarea>
        </div>
    </body>
</html>

下面是它在浏览器中的呈现方式:

屏幕截图

为什么会发生这种事?如何删除这些多余的空间?

推荐答案

vertical-align: top加到textarea.

产生间隙的原因是textareainline(或inline-block)元素,间隙是文本中为descenders保留的空间.我不知道为什么不同浏览器之间的差距是不同的.

Html相关问答推荐

我想在 html 中使用 colored颜色 设置半背景

是否无法在 Bootstrap 5 中更改 的字体系列?

成为带有 CSS 下划线的