在label元素内使用input时焦点超出左右边框，代码问题排查求助

嘿，我看了你的代码，很快就找到问题的根源啦！

问题原因 #

你遇到的焦点框溢出问题，本质是CSS盒模型的默认行为导致的：

• 默认情况下，元素的box-sizing是content-box，这意味着你设置的width只计算「内容区域」的宽度，边框（border）会额外增加元素的总宽度。
• 比如你的#name input设置了width:35%+border:2px solid，实际总宽度就是35% + 4px（左右边框各2px），这就会让input超出预期宽度，焦点时的轮廓（哪怕你设了outline:0，部分浏览器仍会有默认的焦点样式）自然也会跟着溢出。

解决方法 #

只需要给input（以及其他带边框的元素）加上box-sizing: border-box，就能让width包含边框和内边距，彻底解决溢出问题。另外建议自定义焦点样式，避免浏览器默认样式干扰：

label { 
  display: block; 
  padding-top: 30px; 
  text-align: center; 
}
label input { 
  background-color: transparent; 
  font-size: 36px; 
  outline: 0; 
  text-align: center;
  box-sizing: border-box; /* 核心：让width包含边框和内边距 */
}
/* 自定义焦点样式，确保和元素对齐 */
label input:focus {
  outline: 2px solid #ff5126; /* 替换成你想要的颜色/样式 */
  outline-offset: 0; /* 避免焦点框偏移溢出 */
}
#comment { 
  width: 75%; 
  height: auto; 
  margin: 0 auto; 
  border-radius: 10px; 
  background: #d9d9d9; 
  margin-bottom: 30px; 
  border: 6px lightblue solid;
  box-sizing: border-box; /* 这个元素也建议加上，避免边框导致宽度溢出 */
}
#name { 
  width: 35%; 
  border: 2px solid #ff5126; 
}
#email { 
  width: 50%; /* 补全你未写完的宽度值 */
  border: 2px solid #ff5126; 
}

额外说明 #

box-sizing: border-box是前端开发中非常常用的设置，很多项目会直接给所有元素统一设置：

* {
  box-sizing: border-box;
}

这样所有元素的width都会包含边框和内边距，避免类似的布局溢出问题。

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