1ピクセルの境界線がdivに追加されると、divのサイズが増加します。

クリックすると、1pxの境界線がdivに追加されるため、Divのサイズは2px X 2px増加します。divサイズを大きくしたくありません。そうするための簡単な方法はありますか？

乱雑な詳細説明実際には、コンテナーのdivにfloat：left（アイコンと同じサイズ）のDIVを追加しているため、すべてが次々に積み上げられ、（container-divの幅は300px）幅の左側にスペースがないため、子DIVは次の行にあるため、カタログと同様ですが、境界線のため、選択されたDIVサイズのみが増加するため、選択されたDIVの下のDIVは右に移動し、選択されたDIVの下に空のスペースを作成します。

編集：
選択時に高さ/幅を減らしますが、元に戻す方法。サードパーティのフレームワークを使用しているため、DIVが選択を失ったときにイベントは発生しません。

border cssプロパティは、テーブルのtdsを除くすべての要素の「外側」のサイズを増やします。Firebug（廃止）でこれがどのように機能するかを、html-> layoutタブで視覚的に把握できます。

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

あなたのケースでは、ボーダーがdivの「内側」にあるように見せるために、選択したCSSクラスで、ボーダーサイズの2倍で要素の幅と高さを減らすか、または同じことをすることができます要素のパディング。

例えば：

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

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

これは、このシナリオでも役立ちます。divの幅を変更せずに境界線を設定できます

textarea { 
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

http://css-tricks.com/box-sizing/から取得

クリックする前に境界線を設定して、背景と同じ色にします。

次に、クリックしたときに背景色を変更するだけで、幅は変更されません。

別の良い解決策は、のoutline代わりに使用することですborder。ボックスモデルに影響を与えずに境界線を追加します。これはIE8 +、Chrome、Firefox、Opera、Safariで動作します。

（https://stackoverflow.com/a/8319190/2105930）

に変更borderしてみてくださいoutline：

outline: 1px solid black;

これらのソリューションの多くを使用してきborder-color: transparentたので、設定のトリックを使用することが最も柔軟で広くサポートされていることがわかりました。

.some-element {
    border: solid 1px transparent;
}

.some-element-selected {
    border: solid 1px black;
}

なぜそれが良いのか：

• 要素の幅をハードコードする必要はありません
• 優れたクロスブラウザーサポート（IE6のみが欠落）
• とは異なりoutline、たとえば上と下の境界を別々に指定することもできます。
• 境界線の色を背景の色に設定するのとは異なり、背景を変更した場合にこれを更新する必要はありません。また、塗りつぶされていない背景と互換性があります。

これを試して

box-sizing: border-box;

私は通常、この問題を解決するためにパディングを使用します。ボーダーが消えるとパディングが追加され、ボーダーが表示されるとパディングが削除されます。サンプルコード：

.good-border {
  padding: 1px;
}

.good-border:hover {
  padding: 0px;
  border: 1px solid blue;
}

JSFiddleでサンプルコード全体を表示：https ://jsfiddle.net/3t7vyebt/4/

幅と高さをボーダー幅の2倍に減らすだけです

インセットシャドウを使用していくつかの豪華なことができます。サイズを変更せずに要素の下部にボーダーを配置する例：

.bottom-border {
  box-shadow:inset 0px -3px 0px #000;
}

明示的に設定しないと、高さや幅に影響を与えたくない場合があります。その場合、疑似要素を使用すると便利です。

.border-me {
    position: relative;
}

.border-me::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: solid 1px black;
}

また、疑似要素を使用してさらに多くのことができるので、これは非常に強力なパターンです。

境界線を大きくするときは、マージンサイズを小さくしてみてください

私は、クラスを追加することによって任意の要素を「境界」にでき、その次元に影響を与えないようにする必要がありました。私にとって良い解決策は、ボックスシャドウを使用することでした。しかし、他の兄弟のために、効果が見えない場合がありました。そこで、典型的なボックスシャドウとインセットボックスシャドウの両方を組み合わせました。結果は、寸法を変更することなくボーダーの外観になります。

コンマで区切られた値。以下に簡単な例を示します。

.add_border {
    box-shadow:-1px 0 1px 1px rgba(0, 0, 0, 0.75), inset -1px 0 0 1px rgba(0, 0, 0, 0.75);
}

jsfiddle

好みの外観に調整すれば、準備完了です。

css calc（）関数も使用できます

width: calc(100% - 2px);

境界線の2pxを引く

.filter_list_button_remove {
    border: 1px solid transparent; 
    background-color: transparent;
}
.filter_list_button_remove:hover {
    border: 1px solid; 
}

背景と同じ色の境界線を持つ要素を作成し、境界線を表示させたい場合は、その色を変更するだけです。

コンテンツがdiv動的にレンダリングされ、その高さを設定したい場合は、次のように簡単なトリックを使用できますoutline。

button {
    padding: 10px;
    border: 4px solid blue;
    border-radius: 4px;
    outline: 2px solid white;
    outline-offset: -4px;
}

button:hover {
    outline-color: transparent;
}

ここに例：https : //codepen.io/Happysk/pen/zeQzaZ

ボックスシャドウインセットを試すことができます

このようなもの：box-shadow：inset 0px -5px 0px 0px #fff

サイズを増やすことなく、要素の下部に白い5pxの境界線を追加します