ボーダーが追加されたときにジャンプするCSS divs

Question

最初のもの（左上）の上にカーソルを置いたときにボックスがシフトする理由を理解できません。ボックスサイズをボックスに設定しているので、ホバー上の追加されたボーダーは影響を与えてはならず、frstボックスでのみ発生します。助けてください！境界線の幅が要素の幅に追加されるため、追加の幅はホバー上の要素に追加されたときので、それは通常のレイアウトの流れを変えてしまう、ある

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/