如何删除div包装器（webkit）内textarea下方的边距[重复]答案

【问题标题】：how to remove the margin below a textarea inside a div wrapper (webkit) [duplicate]如何删除div包装器（webkit）内textarea下方的边距[重复]
【发布时间】：2011-04-30 11:50:40
【问题描述】：

 <!DOCTYPE html>
 <html> 
 <head>
 </head>
 <body>
      <div style="background-color:#f09;">
           <textarea></textarea>
      </div>
 </body>
 </html>

Chrome 中的结果：

删除了无效的 ImageShack 链接

FF 中的结果：

删除了无效的 ImageShack 链接

【问题讨论】：

标签： webkit textarea wrapper margin

【解决方案1】：

尝试 display:block 在 textarea 上：

 <!DOCTYPE html>
 <html> 
 <head>
      <style type="text/css">
           textarea {display:block;}
      </style>
 </head>
 <body>
      <div style="background-color:#f09;">
           <textarea></textarea>
      </div>
 </body>
 </html>

问题在于 textarea 是内联的，它使用文本高度来添加一些额外的填充。您还可以指定：

 <!DOCTYPE html>
 <html> 
 <head>
 </head>
 <body>
      <div style="background-color:#f09;line-height:0px;font-size:1px;">
           <textarea></textarea>
      </div>
 </body>
 </html>

如果您想保持 textarea 内联并且不想弄乱父块的字体属性，另一个有用的选项（我建议使用 line-height 的前一个方法）：

 <!DOCTYPE html>
 <html> 
 <head>
      <style type="text/css">
           textarea {vertical-align:middle;}
      </style>
 </head>
 <body>
      <div style="background-color:#f09;">
           <textarea></textarea>
      </div>
 </body>
 </html>

最后，如果您真的担心浏览器之间的一致性，请记住边距和其他类似的东西可以在不同的浏览器中使用不同的默认值来定义。使用 YUI-Reset 之类的东西可以帮助将所有新浏览器带到您可以构建的一致标准。

【讨论】：

如果你想保持<textarea>的display风格内联，你也可以使用textarea { vertical-align: bottom; }（或top，或middle；可能几乎任何值，除了baseline，这是 inline 元素的默认值）。
感谢上帝！很不错。 :)

【解决方案2】：

将显示模式设置为阻止对我有用。澄清一下，这里是您需要添加到样式表的声明。我建议首先将其添加到您的重置或规范化样式表中。

textarea {
    display:block
}

【讨论】：

【解决方案3】：

我通常在我制作的每个 global.css 文件中都有一个“第一行”。说：

<style>    
html,body,p,h1,h2,h3,h4,h5,h6,img,table,td,th 
{
   margin:0;padding:0;border:none;
   font-familiy:"my sites default font";font-size:10px;
}
</style>

在这之后，我觉得我可以完全控制浏览器的行为，在 5 个不同的平台上进行测试时：Chrome、Firefox、Safari、Opera 和 ... doh... Microsoft Internet Extracrap..

然后您也可以轻松地为和做类似的事情。如果第一行做的太多，那么只为“特殊情况”做第二行。

<style>
textarea {margin:0; padding:0; border:none; display:block;}
</style>

记住 CSS 继承，所以你可以有多个不同类的声明。

这能解决您的问题吗？

【讨论】：

我接受 -1 但请评论你是谁，所以我知道你不同意什么。它对我有用，所以我想知道我错过了什么。