在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相关问答推荐

一次悬停可触发同一分区中的另一次悬停

弹性项在主轴方向溢出

网格容器中的定心元件

将CSS应用于TD标记内的div

如何在垂直堆叠的表格中调整人造列的大小?

SVG动画只有在打开S开发工具的浏览器时才开始播放

滚动平滑在笔记本电脑上不起作用,但在Nextjs网站的手机浏览器中起作用

将导航项目底部边框与导航栏对齐

文本css后面未显示背景 colored颜色

UL 的行为就像它不属于任何类别

Bootstrap 轮播内容在箭头之间不显示

如何只为 Navbar 中的一个元素提供动画,其余元素没有使用 css 的动画

如何在图片前面放置下拉框?

为什么使用 Css 只能看到 1 列而不是 3 列?

在shiny 的应用程序中使用图标功能时出错

那边界从何而来?

水平对齐两列中的两个按钮 同一级别

将 div 放在图片旁边而不是下方

在 html 邮箱的左侧和右侧制作多个元素很热门吗?

下拉菜单项在页面加载时显示,需要隐藏直到悬停