如何消除HTML textarea元素后的多余空白

这个空白本质是行内元素的空白字符间隙：input和textarea默认属于inline-block类型，HTML代码里的换行、空格等空白字符会被浏览器渲染成间隙，Chrome中input因默认样式表现不同，Firefox则统一显示该间隙，和border、outline属性无关。

以下是几种可行的解决办法：

• 移除HTML中的空白字符：把input和textarea标签紧凑排列，去掉它们之间的换行、空格：

<div>
<input class="it"/><textarea class="it"></textarea><input class="it"/><textarea class="it"></textarea>
</div>

• 父元素设置font-size: 0：给包裹的div设置font-size: 0消除空白，再给子元素恢复需要的字体大小（按需调整）：

div {
  font-size: 0;
}
.it {
  min-width: 100%;
  border: none;
  background-color: lightblue;
  outline: none;
  font-size: 16px; /* 恢复默认字体大小 */
}
.it:focus{
  border: none;
  outline: none;
}

• 使用Flex布局：给父div设置flex布局，自动消除元素间的空白，还能灵活控制排列方向：

div {
  display: flex;
  flex-direction: column; /* 垂直排列，若需水平可去掉此属性 */
}
.it{
  min-width: 100%;
  border: none;
  background-color: lightblue;
  outline: none;
}
.it:focus{
  border: none;
  outline: none;
}

内容的提问来源于stack exchange，提问作者user2153050