web-dev-qa-db-ja.com

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

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

乱雑な詳細説明
実際には、float：left（アイコンと同じサイズ）を使用してDIVをcontainer-divに追加しているため、すべてが次々にスタックし、いつ（container-divの幅は300px）左スペースなし賢いので子DIVが次の行に来るので、カタログのようになりますが、選択されたDIVサイズだけが境界線のために増加するため、選択されたDIVの下のDIVは右に移動し、選択されたDIVの下に空のスペースを作成します。

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

csshtmlborder
101
Nachiket

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

例として、幅と高さが10ピクセルで境界が1ピクセルのdivの外側の幅と高さは12ピクセルになります。

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

例えば：

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

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

これは、このシナリオでも役立ちます。 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/ から取得

91
ejfrancis

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

その後、クリックすると背景色が変更されるだけで、幅は変更されません。

41
corymathews

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

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

36
chowey

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

outline: 1px solid black;
28
panwp

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

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

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

より良い理由：

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

これを試して

box-sizing: border-box;
18
Hoang Trung

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

.good-border {
  padding: 1px;
}

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

enter image description here

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

13
Tho

幅と高さをborder-widthの2倍だけ減らす

6
Sadat

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

2
arun

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

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

.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

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

2
Chris

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

.border-me {
    position: relative;
}

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

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

2
Jack Guy

インセットシャドウを使用して、いくつかのおしゃれなことを行うことができます。サイズを変更せずに要素の下部に境界線を配置する例：

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

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

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

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

width: calc(100% - 2px);

境界線の2pxを引く

1
Rajeev Singh

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

0
Matúš Šťastný