求助：textarea 周围多余空白的来源是什么？

嘿，这个问题我之前排查过，那层顽固的1px空白其实是浏览器默认的盒模型计算方式在搞鬼，跟你之前试的那些方案都没戳中核心。

问题根源拆解 #

你给textarea设了width:100%; height:100%，同时还加了border:1px solid red。默认情况下，元素的box-sizing是content-box——这个属性的意思是：元素的总宽度 = 内容区宽度 + padding + border。

换句话说，当你把textarea的宽度设为容器的100%时，这个100%只算内容区的宽度，再加上左右各1px的border，textarea的实际宽度就变成了「容器宽度+2px」，超出容器的部分就会让容器的背景露出来，看起来像是textarea周围有空白。

就算你聚焦时把padding改成0，border还在，所以那1px的“空白”其实是容器背景透过textarea的边框外溢部分露出来的。

一次性解决的方案 #

最直接的办法就是给textarea加上box-sizing: border-box，这样元素的总宽度就会包含border和padding，不管你加多少边框或内边距，都不会超出你设置的100%宽高。

修正后的完整代码 #

.container { 
  height: 200px; 
  width: 500px; 
  background: steelblue; 
}
textarea { 
  resize: none; 
  height: 100%; 
  width: 100%; 
  margin: 0; 
  padding: 2px; 
  border: 1px solid red; 
  overflow: auto; 
  box-shadow: none; 
  border-radius: 0; 
  background: rgba(255, 255, 255, 0.5);
  box-sizing: border-box; /* 这行是关键！ */
}
textarea:focus, textarea:active { 
  outline: none; 
  padding: 0; 
}

<div class="container">
  <textarea></textarea>
</div>

另外补充个小细节：有些浏览器会给textarea默认设置特殊的盒模型，统一加上box-sizing: border-box能确保跨浏览器的表现一致，以后类似的尺寸溢出问题都可以用这个思路排查。

内容的提问来源于stack exchange，提问作者Jos van Weesel