为什么我的文本区域下方有多余的空间？-css教程-PHP中文网

为什么我的文本区域下方有多余的空间？

Susan Sarandon

发布： 2024-11-04 21:12:01

原创

709 人浏览过

Why Does My Text Area Have Extra Space Below it?

文本区域下方的额外空格：原因和解决方案

问题：

尽管使用简单的标记，额外的垂直空间出现在下方各种网络浏览器中的元素，范围从 1 到 4 像素。

代码片段：

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

登录后复制

原因：

多余的空间是由默认对齐方式造成的元素，被分类为内联（或内联块）元素。此间隙是为下面文本中的潜在下伸部分保留的。

解决方案：

要消除多余的空间，请将以下 CSS 规则添加到您的中。 elements:

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

登录后复制

这会将对齐到其容器的顶部，有效地消除了额外的间距。

以上是为什么我的文本区域下方有多余的空间？的详细内容。更多信息请关注PHP中文网其他相关文章！