聚焦时修改TextInput的内边距/外边距为何会溢出父Div？

我明白你遇到的困扰了——当输入框获得焦点时，你想把内边距设为0让边框紧贴文本，但现在输入框会溢出父div容器。咱们来拆解问题并修复它：

问题根源 #

你的输入框原本设置了width: 100%和box-sizing: border-box，这是很好的做法，因为border-box会让元素的宽度包含内边距（padding）和边框（border），不会超出父容器。但问题出在:focus状态的设置上：

• 你给focus状态的输入框加了margin: 21px，这会让输入框的实际占用宽度=父容器宽度 + 左右margin值，直接导致溢出
• 同时，原有默认状态的margin: 8px 0是仅设置上下margin，focus时改成全方向的margin也打乱了垂直布局

修复方案 #

我们需要调整focus状态的样式，保留padding: 0的需求，同时避免修改左右margin影响宽度：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 400px;
  background-color: lightblue;
  border-radius: 5px;
  padding: 10px;
}

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0; /* 仅设置上下margin，左右留空避免影响宽度 */
  box-sizing: border-box;
  border: 2px solid grey;
  outline: none;
  display: block;
}

input[type=text]:focus {
  border: 2px dotted grey;
  padding: 0; /* 实现边框贴近文本的需求 */
  margin: 8px 0; /* 继承默认状态的上下margin，不修改左右margin */
}
</style>
</head>
<body>

<div>
  <form>
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="fname" value="John">
    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lname" value="Doe">
  </form>
</div>

</body>
</html>

关键改动说明 #

• 保留box-sizing: border-box：确保无论padding怎么变，输入框的宽度始终是父容器的100%，不会因为padding变化而撑开宽度
• 统一margin设置：默认状态和focus状态都只设置上下margin，左右margin保持0，避免额外增加宽度导致溢出
• 仅修改focus状态的padding：实现你想要的“边框贴近文本”的效果，同时不影响布局宽度

这样调整后，输入框获得焦点时就会紧贴文本，同时不会溢出父容器啦！

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