为什么鼠标放在一张图片上显示方框后导致下面的图片被挤开？

Question

求助，被这个问题卡住了。是这样的，我做了一个3X3的图片页面，加了鼠标经过显示方框样式。可是我发现，鼠标放在第一张图片上，第一张图下面的图片会被挤到第二张图片下面。鼠标放在第二张图片上，第二张图下面的图片会被挤到第三张图片下面...以此类推。我在想，是不是要使用到那个什么border：none？我把鼠标经过显示方框的样式，删掉后，就没有被挤开的状况。这是咋的啦？谢谢大家了

Answer 1

应该是你的父元素空间不够用，导致你移动上去显示边框，这样就把这个元素的大小增加了2px，如果你设置的5px的边框，那么久增加了10px的大小空间，如果一开始就布局好了，那么突然一个元素增加了空间，它怎么不往下呢？

Answer 2

谢谢大家了！我的代码写的像屎一样，不好意思贴啊......我又重新写了一遍代码，增加了父元素的空间，确实不挤开了，但是我对各个区域大小的计算规则，还是有点糊糊的，待我琢磨一下哈

Answer 3

 亲， 代码何在。 

Answer 4

代码呢？