这个文本区域周围的额外空间来自哪里？答案

【问题标题】：Where is the extra space coming from around this textarea?这个文本区域周围的额外空间来自哪里？
【发布时间】：2018-05-12 10:41:59
【问题描述】：

我的textarea 遇到了一个奇怪的问题，即使在删除所有样式之后，我的textarea 周围仍有剩余空间。

在下面的示例中，我从 textarea 中删除了所有样式，除了默认的 2px padding。在活动/焦点上填充更改为0px，但您仍然可以看到剩余空间的1px。

我试过了：

给容器一个固定的高度和宽度
给容器padding: 0;
赋予文本区域相同的固定高度和宽度
将 textarea 的 outline-offset 更改为 0

但无济于事..

问题

额外的像素/空间来自哪里？

演示：

.container {
  height: 200px;
  width: 500px;
  background: steelblue;
}

textarea {
  resize: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 2px; /* textarea default padding */
  border: 1px solid red;
  overflow: auto;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.5);
}

textarea:focus,
textarea:active {
  outline: none;
  padding: 0;
}

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

【问题讨论】：

发布问题后，我意识到它一定是边框，因为我厌倦了border: 0.1px solid red，它删除了另外 0.9px 的空间，这意味着使用 0px 边框将没有空间。我总是使用*{box-sizing: border:box;}，我不敢相信我没有想出那个。谢谢大家。

标签： html css textarea padding

【解决方案1】：

您的textarea 宽度大于container：100% + 2px 边框 + 2px 左内边距 + 2px 右内边距

所以在textarea 中使用了box-sizing: border-box;。

box-sizing 属性允许我们在元素的总宽度和高度中包含内边距和边框。

.container {
  height: 200px;
  width: 500px;
  background: steelblue;
}

textarea {
  resize: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 2px; /* textarea default padding */
  border: 1px solid red;
  overflow: auto;
  -webkit-box-shadow: none;
  -moz-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>

【讨论】：

【解决方案2】：

只需在textarea 中添加box-sizing: border-box;

textarea {
  resize: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 2px; /* textarea default padding */
  border: 1px solid red;
  overflow: auto;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.5);
  box-sizing: border-box; // Added
}

【讨论】：

【解决方案3】：

您需要在 texarea 或所有元素中使用box-sizing: border-box;。我的建议是在所有元素中使用。

默认情况下，在 CSS 盒子模型中，您分配给 element 仅应用于元素的内容框。如果元素有任何边框或填充，然后将其添加到宽度和高度到达屏幕上呈现的框的大小。这意味着当你设置宽高时，你必须调整值您给予允许可能添加的任何边框或填充。

* {
  box-sizing: border-box;
}
.container {
  height: 200px;
  width: 500px;
  background: steelblue;
}

textarea {
  resize: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 2px; /* textarea default padding */
  border: 1px solid red;
  overflow: auto;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.5);
}

textarea:focus,
textarea:active {
  outline: none;
  padding: 0;
}

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

【讨论】：