[解決済み] divに1pxのボーダーを付けると、divのサイズが大きくなってしまうので、そうならないようにしたい。

質問

クリックするとdivに1pxのボーダーを追加しているので、Divのサイズが2px×2px増加します。 divのサイズが大きくならないようにしたい。何か簡単な方法はないでしょうか？

メチャクチャ詳しい説明

実は、コンテナDIVにfloat:leftのDIV（アイコンのように同じサイズ）を追加しているので、次々と積み重なり、（コンテナDIVの幅が300pxになると）幅方向のスペースがなくなり、次の行に子DIVが来るのでカタログみたいになるのですが、ボーダーのために選択したDIVだけサイズが大きくなり、選択DIVの下のDIVは右に行って選択DIVの下に空きができてしまうんです。

EDITです。

選択時にHeight/Widthを減少させるが、それを元に戻す方法。サードパーティのフレームワークを使用しているので、DIVが選択を失ったときのイベントはありません。

どうすればいいですか？

border cssプロパティは、テーブル内のtdsを除くすべての要素のquot;outer"サイズを増加させます。Firebug で、これがどのように機能するかを視覚的に把握することができます ( 廃止 ) の「html->layout」タブの下にあります。

例として、幅と高さが10px、ボーダーが1pxのdivは、外側の幅と高さが12pxになります。

この場合、選択した CSS クラスで、ボーダーが div の内側にあるように見せるには、ボーダーのサイズの 2 倍で要素の幅と高さを縮小するか、要素の padding にも同じことをします。

例

div.navitem
{
    width: 15px;
    height: 15px;
    /* padding: 5px; */
}

div.navitem .selected
{
    border: 1px solid;
    width: 13px;
    height: 13px;
    /* padding: 4px */
}