textarea元素右侧边框显示及父容器高度适配技术咨询

1. 为何textarea的右侧边框被隐藏？如何在不为child1设置padding的前提下显示该边框？ #

原因分析 #

你的textarea设置了width: 100%，同时带有2px solid black的边框。默认情况下，CSS元素的宽度计算遵循box-sizing: content-box规则——也就是内容宽度 + 内边距 + 边框才是元素的实际宽度。这就导致textarea的实际宽度是父容器child1的100%宽度，再加上左右各2px的边框，直接超出了child1的宽度范围。而child1设置了overflow: hidden，超出部分被裁剪，所以右侧边框就看不到了。

解决方案 #

不需要给child1加padding，只需要给textarea添加**box-sizing: border-box**属性，让元素的宽度计算把边框和内边距包含在width: 100%的范围内，这样就不会超出父容器。修改后的textarea样式如下：

textarea {
  width: 100%;
  height: 100px;
  resize: none;
  border: 2px solid black;
  box-sizing: border-box; /* 新增这一行 */
}

2. 未设置child1的height属性，为何其高度大于textarea？如何让它与textarea高度适配？ #

原因分析 #

主要有两个核心原因：

• textarea默认的display属性是inline-block，而块级父元素child1的默认line-height不为0，这会让父元素在textarea的上下产生额外的空白区域。
• inline-block元素默认的vertical-align是baseline，这也会导致底部出现一小段空隙。

解决方案 #

以下三种方案都能实现child1与textarea高度完全适配，你可以按需选择：

方案一：将textarea改为块级元素

把textarea的display改成block，消除行高带来的空隙：

textarea {
  width: 100%;
  height: 100px;
  resize: none;
  border: 2px solid black;
  box-sizing: border-box; /* 建议配合第一个问题的修复一起添加 */
  display: block; /* 新增这一行 */
}

方案二：消除child1的行高

给child1设置line-height: 0，直接去掉行高带来的空白：

#child1 {
  background-color: red;
  margin: 10px;
  overflow: hidden;
  line-height: 0; /* 新增这一行 */
}

方案三：调整textarea的垂直对齐方式

给textarea设置vertical-align: top，改变它的默认垂直对齐逻辑：

textarea {
  width: 100%;
  height: 100px;
  resize: none;
  border: 2px solid black;
  box-sizing: border-box;
  vertical-align: top; /* 新增这一行 */
}

内容的提问来源于stack exchange，提问作者Nguyen Van Tam