css - 遇到一个样式问题

设置 box-sizing: border-box; 可以让边框的粗细不影响整个内容的宽高；box-sizing：content-box | border-box
默认值：content-box
适用于：所有接受width和height的元素
继承性：无
动画性：否
计算值：指定值

content-box： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )
此属性表现为标准模式下的盒模型。
border-box： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )
此属性表现为怪异模式下的盒模型。

题主提到的：

失去焦点的这一行和上一行的间距缩小了那么一点 就是margin-top发生了变化

这一点是有误的，margin-top并不会变化，真实的情况是这样：

input元素的默认border是2px，因此动态修改为1px后会有一个抖动。如@zhangpenglin的回答那样把初始的input的border设置为1px就可以了。

input默认border-size是2px，在程序中修改为1px后，占用的空间小了，因此可以看到其他元素都往上移动了一点。
解决方式是设置input默认的边框为1px

input {
    border: 1px solid silver;
}

给p input加个border样式不就行了

试一下把每一行都用p包起来并且设margin，取消input的margin

p input{display: inline-block;width: 200px;height: 20px;border:1px solid #ccc}