为什么设置了box-sizing: border-box的input元素宽度仍大于其他元素？

问题原因 #

• 你为.searchbar类同时设置了width: 100%和margin: .5em，box-sizing: border-box的作用范围仅包含内边距padding和边框border，不会把外边距margin纳入宽度计算，因此input的实际总宽度为「父元素form的100%宽度 + 左右margin总和1em」，超出了父容器的可用宽度，所以比其他同级元素更宽。
• 额外影响因素：input外层的form标签没有清除浏览器默认边距，部分浏览器的form默认自带margin/padding，也会导致宽度计算偏差。

修复方案 #

以下两种方案任选其一即可：

1. 使用calc动态计算宽度，抵消margin的额外宽度：

   .searchbar {
     margin: .5em;
     width: calc(100% - 1em);
   }
   

2. 把左右边距转移到外层form容器，避免margin叠加：

   /* 给外层form加内边距 */
   .my-contacts-div form {
     padding: 0 .5em;
   }
   /* 移除searchbar的左右外边距 */
   .searchbar {
     margin: .5em 0;
     width: 100%;
   }
   

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