ロールオーバーでボーダーを適用したときレイアウトを崩さない方法

Image Rollover Borders That Do Not Change Layout （別窓）

hoverに対してボーダーを適用するとき、何も考えずにコーディングしてしまうとレイアウトが崩れてしまうことがあります。
そんな問題を解消する方法が二つ紹介されています。

まずは一つ目。
borderとネガティブマージンを用いる方法です。

#example-one a img, #example-one a { border: none; overflow: hidden; float: left; }
#example-one a:hover { border: 3px solid black; }
#example-one a:hover img { margin: -3px; }

hover時のボーダーを同じサイズのネガティブマージンによってレイアウトのずれを解消しています。
次にアウトラインを用いる方法。

#example-two a img, #example-two a { border: none; float: left; }
#example-two a { margin: 3px; }
#example-two a:hover { outline: 3px solid black; }

特に難しいことをしているわけではありませんが、もし行き詰ったら参考にどうぞ。