Wenn 1 px Rahmen zu div hinzugefügt wird, erhöht sich die Div-Größe. Das möchten Sie nicht tun

Beim Klicken füge ich hinzu, 1px Rand zu div, so dass Div Größe um 2px X 2px erhöht. Ich möchte nicht, dass die Div-Größe erhöht wird. Gibt es eine einfache Möglichkeit, dies zu tun?

Unordentlich Detaillierte Erklärung
Eigentlich füge ich DIVs mit float: left (gleiche Größe, wie Symbole) zu einem Container-Div hinzu, sodass alle nacheinander gestapelt werden und wenn (Container-Div-Breite 300px) kein Platz mehr in der Breite übrig bleibt Untergeordnete DIVs werden in der nächsten Zeile angezeigt, daher ähnelt dies dem Katalog. Da jedoch nur die ausgewählte DIV-Größe des Rahmens erhöht wird, wird die DIV unter der ausgewählten DIV nach rechts verschoben und ein leerer Bereich unter der ausgewählten DIV erstellt.

BEARBEITEN:
Verringern der Höhe / Breite bei der Auswahl, aber wie man sie wieder erhöht. Verwenden Sie ein Framework von Drittanbietern, haben Sie also kein Ereignis, wenn DIV die Auswahl verliert.

Die Eigenschaft border css erhöht alle "äußeren" Elemente, mit Ausnahme von tds in Tabellen. Auf der Registerkarte HTML-> Layout erhalten Sie eine visuelle Vorstellung davon, wie dies in Firebug ( eingestellt ) funktioniert.

Nur als Beispiel hat ein Div mit einer Breite und Höhe von 10 Pixel und einem Rand von 1 Pixel eine äußere Breite und Höhe von 12 Pixel.

In Ihrem Fall können Sie die Breite und Höhe des Elements um das Doppelte Ihrer Rahmengröße reduzieren, um den Eindruck zu erwecken, dass sich der Rand auf der "Innenseite" des div befindet. In Ihrer ausgewählten CSS-Klasse können Sie das Gleiche tun die Elemente Polsterung.

Z.B:

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

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

Dies ist auch in diesem Szenario hilfreich. Sie können damit Rahmen festlegen, ohne die Div-Breite zu ändern

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+ */
}

Entnommen aus http://css-tricks.com/box-sizing/

Legen Sie einen Rahmen fest, bevor Sie auf die gleiche Farbe wie der Hintergrund klicken.

Wenn Sie dann auf klicken, ändern Sie einfach die Hintergrundfarbe und die Breite ändert sich nicht.

Eine andere gute Lösung ist, outlineanstelle von zu verwenden border. Es wird ein Rahmen hinzugefügt, ohne das Box-Modell zu beeinflussen. Dies funktioniert unter IE8 +, Chrome, Firefox, Opera und Safari.

( https://stackoverflow.com/a/8319190/2105930 )

Versuchen Sie , borderzu outline:

outline: 1px solid black;

Nachdem ich viele dieser Lösungen verwendet habe, finde ich den Trick des Einstellens border-color: transparentam flexibelsten und am weitesten verbreitet:

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

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

Warum ist es besser:

• Die Breite des Elements muss nicht fest codiert werden
• Großartige browserübergreifende Unterstützung (nur IE6 fehlt)
• Im Gegensatz zu mit outlinekönnen Sie beispielsweise die oberen und unteren Ränder weiterhin separat angeben
• Im Gegensatz zum Festlegen der Rahmenfarbe als Hintergrundfarbe müssen Sie diese nicht aktualisieren, wenn Sie den Hintergrund ändern, und sie ist mit nicht einfarbigen Hintergründen kompatibel.

Versuche dies

box-sizing: border-box;

Normalerweise verwende ich Polsterung, um dieses Problem zu beheben. Die Polsterung wird hinzugefügt, wenn der Rand verschwindet, und entfernt, wenn der Rand angezeigt wird. Beispielcode:

.good-border {
  padding: 1px;
}

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

Sehen Sie sich meinen vollständigen Beispielcode auf JSFiddle an: https://jsfiddle.net/3t7vyebt/4/

Verringern Sie einfach die Breite und Höhe um das Doppelte der Randbreite

Sie können einige ausgefallene Dinge mit eingelassenen Schatten tun. Beispiel für das Einfügen eines Rahmens am unteren Rand eines Elements, ohne dessen Größe zu ändern:

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

Manchmal möchten Sie nicht, dass Höhe oder Breite beeinflusst werden, ohne dies explizit festzulegen. In diesem Fall finde ich es hilfreich, Pseudoelemente zu verwenden.

.border-me {
    position: relative;
}

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

Sie können auch viel mehr mit dem Pseudoelement tun, so dass dies ein ziemlich mächtiges Muster ist.

Versuchen Sie, die Randgröße zu verringern, wenn Sie den Rand vergrößern

Ich musste in der Lage sein, jedes Element durch Hinzufügen einer Klasse zu "begrenzen" und ihre Dimensionen nicht zu beeinflussen. Eine gute Lösung für mich war die Verwendung von Box-Shadow. In einigen Fällen war der Effekt jedoch aufgrund anderer Geschwister nicht sichtbar. Also habe ich sowohl typischen Box-Shadow als auch Inset-Box-Shadow kombiniert. Das Ergebnis ist ein Rahmenlook ohne Änderung der Abmessungen.

Durch Komma getrennte Werte. Hier ist ein einfaches Beispiel:

.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

Passen Sie Ihren bevorzugten Look an und los geht's!

Wir können auch die Funktion css calc () verwenden

width: calc(100% - 2px);

Subtrahieren von 2px für Ränder

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

Sie können das Element mit Rahmen mit derselben Hintergrundfarbe erstellen. Wenn der Rahmen angezeigt werden soll, ändern Sie einfach seine Farbe.

Wenn der Inhalt von Ihnen divdynamisch gerendert wird und Sie seine Höhe festlegen möchten, können Sie einen einfachen Trick verwenden mit outline:

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

button:hover {
    outline-color: transparent;
}

Beispiel hier: https://codepen.io/Happysk/pen/zeQzaZ

Sie können einen Box-Shadow-Inset ausprobieren

so etwas wie: box-shadow: Einschub 0px -5px 0px 0px #fff

Fügt am unteren Rand des Elements einen weißen 5-Pixel-Rand hinzu, ohne die Größe zu erhöhen