就是想做个小验证 如果没有输入内容就在失去焦点时把边框变成红色 我是这么设置的样式1px solid red 代码运行没问题 但是鼠标离开输入框时边框不但变成了红色还有一个细微的变化就是失去焦点的这一行和上一行的间距缩小了那么一点 就是margin-top发生了变化 我把失去焦点的边框变成2px solid red间距就没变化 但是改成2px就太难看了 这个应该怎么办呢？
6
714
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
试一下把每一行都用p包起来并且设margin，取消input的margin
给p input加个border样式不就行了
input默认border-size是2px，在程序中修改为1px后，占用的空间小了，因此可以看到其他元素都往上移动了一点。
解决方式是设置input默认的边框为1px
题主提到的：
这一点是有误的，
margin-top并不会变化，真实的情况是这样：input元素的默认border是2px，因此动态修改为1px后会有一个抖动。如@zhangpenglin的回答那样把初始的input的border设置为1px就可以了。设置 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 )
此属性表现为怪异模式下的盒模型。