关于textarea的兼容性问题

corchen

于 2012-10-19 10:07:32 发布

阅读量621

点赞数

CC 4.0 BY-SA版权

文章标签：新浪微博 div html 测试 css

本文链接：https://blog.youkuaiyun.com/corchen/article/details/8088567

本文揭示了在CSS中，Textarea元素的高度属性会包含padding，而div元素的高度不会包含padding，通过实例代码进行详细说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

众所周知，css中height属性是不包括padding和margin的（但是background是包括内部height和width的）。

但是今天做新浪微博站内应用的是否发现我的微薄发布器中图片位置老是不对，研究了一下发现原因在于textarea的height和width的值是包括padding的，也就是说设置了

padding：10px,height:100px

那么真实的height应该是100-10*2=80px!!!!,这一点和div有很大的不同

下边是一组自己的测试代码

<html>
 <head>
   <style>
     textarea{
	 width:100px;
	 height:100px;
	 padding:20px;
	 resize:false;}
	 div{
	 width:100px;
	 height:100px;
	 padding:20px;	 
	 background:#666666;}
   </style>
 </head>
 <body>
 <textarea></textarea>
 <div></div>
 </body>
</html>