添加邊框時CSS Div跳躍

Question

我不明白爲什麼當我將鼠標懸停在第一個（左上角）上時，這些框會發生變化。我已經將邊界框設置爲邊界框，因此添加的懸停邊框不應該影響事物，並且只會在第一個框中出現。請幫忙！

JS撥弄here.

* { 
    box-sizing: border-box !important; 
} 

body{ 
    font-family: Arial, Helvetica, sans-serif; 
} 

#gameArea { 
    width: 700px; 
    margin: 0 auto; 
} 

h1{ 
    text-align: center; 
} 

.card { 
    float: left; 
    margin: 10px; 
    padding: 20px; 
    background: lightblue; 
    text-align: center; 
    border-radius: 5px; 
    box-shadow: 10px 10px 10px #ccc; 
} 

.hidden{ 
    display: none; 
} 

.card:hover { 
    cursor: pointer; 
    border: 3px solid blue; 
} 

.card p { 
    font-size: 48px; 
    color: blue; 
} 

img { 
    width: 250px; 
    height: 188px; 
    vertical-align: middle; 
} 

.helper { 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
     margin:0; 
} 

Answer 1

這是因爲邊界寬度增加了元件的寬度，因此當一個額外的寬度將被添加到懸停的元素，它會改變正常佈局流程。

您可以輕鬆地在靜止狀態下加入3px透明邊框修正：

.card { border: 3px solid transparent; } 

的jsfiddle叉：https://jsfiddle.net/azizn/pL2j0zu5/