如何在 chrome 中删除 div 内的 textarea 的额外空间？答案

【问题标题】：How to remove extra space of a textarea inside a div in chrome?如何在 chrome 中删除 div 内的 textarea 的额外空间？
【发布时间】：2013-01-26 10:43:48
【问题描述】：

我有一个文本区域，它在 Firefox 上与左侧完美对齐，但在 chrome 上，添加了一点空间。我不知道它为什么在那里，但我尝试了很多东西来摆脱空间，但就是做不到。 Chrome 将文本区域向右推 2 个像素。有谁知道我做错了什么，或者有没有办法在 chrome 上对齐它？

这是我的代码：

HTML：

<html>
<head>
<link rel="stylesheet" type="text/css" href="testdiv.css" />
</head>
<body>
<div class="outermostshell">    
    <div class="textareashell">
            <textarea name="status" rows="2" cols="30"></textarea>
    </div>
</div>
</body>
</html>

CSS：

.outermostshell
    {
        position:fixed;
        width:300px;
        height:600px;
        background-color:red;

    }

.textareashell
    {
        position:relative;
        top:10px;
        padding:0;
        border:0;
        left:0px;
                margin:0px;
    }

任何帮助将不胜感激。

【问题讨论】：

标签： html css google-chrome textarea

【解决方案1】：

某些浏览器（包括 Chrome）对表单元素有默认边距。只需将边距设置为零：

.textareashell textarea { margin: 0; }

【讨论】：

你是个天才，谢谢。
我建议您使用textarea {margin:0;}（不带 .textareashell 类），因此这些将是全局更改，因此需要在您的 html 上进行额外标记。
@Marcello：它不需要任何额外的标记，因为 OP 已经有了它。在不同的情况下，将这样的设置应用于所有文本区域可能会也可能不会更可取。
@Guffa：实际上，我什至会更进一步，做input[type="text"], textarea {margin:0;}，一旦它们的样式经常相同。澄清一下，这是个人喜好问题，因为您已经提供了@r1nzler 问题的答案。 :-)
您还可以使用 Normalize.css，它使浏览器呈现默认元素的方式保持一致：nicolasgallagher.com/about-normalize-css

【解决方案2】：

我更喜欢使用 padding-left: 2px;

【讨论】：