Quando il bordo di 1 px viene aggiunto al div, la dimensione Div aumenta, non voglio farlo

Al clic sto aggiungendo 1px bordo a div, quindi la dimensione Div aumenta di 2px X 2px. Non voglio aumentare la dimensione del div. C'è un modo semplice per farlo?

Spiegazione dettagliata disordinata
In realtà sto aggiungendo DIV con float: left (stessa dimensione, come le icone) a un container-div, quindi tutti si accumulano uno dopo l'altro, e quando (la larghezza del container-div è di 300px) non c'è spazio lasciato in larghezza così i DIV secondari vengono visualizzati nella riga successiva, quindi il suo catalogo simile, ma a causa del bordo viene aumentata solo la dimensione DIV selezionata, DIV sotto DIV selezionato va a destra e crea uno spazio vuoto sotto DIV selezionato.

EDIT:
Diminuendo Altezza / Larghezza sulla selezione, ma come aumentarlo indietro. Usando un framework di terze parti, quindi non avere eventi quando DIV perde la selezione.

La proprietà border css aumenterà la dimensione "esterna" di tutti gli elementi, ad eccezione di tds nelle tabelle. Puoi avere un'idea visiva di come funziona in Firebug ( fuori produzione ), nella scheda layout html->.

Ad esempio, un div con una larghezza e un'altezza di 10px e un bordo di 1px, avrà una larghezza esterna e un'altezza di 12px.

Nel tuo caso, per far sembrare che il bordo si trovi "all'interno" del div, nella classe CSS selezionata, puoi ridurre la larghezza e l'altezza dell'elemento raddoppiando la dimensione del bordo, oppure puoi fare lo stesso per l'imbottitura degli elementi.

Per esempio:

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

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

Questo è utile anche in questo scenario. ti permette di impostare i bordi senza cambiare la larghezza 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+ */
}

Tratto da http://css-tricks.com/box-sizing/

imposta un bordo prima di fare clic per avere lo stesso colore dello sfondo.

Quindi, quando fai clic, cambia il colore di sfondo e la larghezza non cambierà.

Un'altra buona soluzione è usare outlineinvece di border. Aggiunge un bordo senza influire sul modello di riquadro. Funziona su IE8 +, Chrome, Firefox, Opera, Safari.

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

Prova a cambiare borderin outline:

outline: 1px solid black;

Avendo utilizzato molte di queste soluzioni, trovo che il trucco dell'impostazione border-color: transparentsia il più flessibile e ampiamente supportato:

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

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

Perché è meglio:

• Non è necessario codificare a fondo la larghezza dell'elemento
• Ottimo supporto cross-browser (mancava solo IE6)
• A differenza di outline, è ancora possibile specificare, ad esempio, i bordi superiore e inferiore separatamente
• A differenza dell'impostazione del colore del bordo in modo che corrisponda a quello dello sfondo, non è necessario aggiornarlo se si cambia lo sfondo ed è compatibile con sfondi di colore non solido.

Prova questo

box-sizing: border-box;

Di solito uso il riempimento per risolvere questo problema. L'imbottitura verrà aggiunta quando il bordo scompare e rimossa quando appare il bordo. Codice di esempio:

.good-border {
  padding: 1px;
}

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

Visualizza il mio codice di esempio completo su JSFiddle: https://jsfiddle.net/3t7vyebt/4/

Basta ridurre la larghezza e l'altezza del doppio della larghezza del bordo

Puoi fare alcune cose fantasiose con le ombre inserite. Esempio per mettere un bordo sul fondo di un elemento senza modificarne le dimensioni:

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

A volte non si desidera che l'altezza o la larghezza vengano influenzate senza l'impostazione esplicita. In tal caso, trovo utile usare gli pseudo elementi.

.border-me {
    position: relative;
}

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

Puoi anche fare molto di più con l'elemento pseudo, quindi questo è un modello abbastanza potente.

Prova a ridurre la dimensione del margine quando aumenti il ​​bordo

Avevo bisogno di essere in grado di "bordare" qualsiasi elemento aggiungendo una classe e non influenzarne le dimensioni. Una buona soluzione per me era usare box-shadow. Ma in alcuni casi l'effetto non era visibile a causa di altri fratelli. Così ho combinato sia il box-shadow tipico che il box-shadow interno. Il risultato è un aspetto del bordo senza cambiare alcuna dimensione.

Valori separati da virgola. Ecco un semplice esempio:

.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

Regola il tuo look preferito e sei a posto!

Possiamo anche usare la funzione css calc ()

width: calc(100% - 2px);

sottraendo 2px per i bordi

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

Puoi creare l'elemento con bordo con lo stesso colore dello sfondo, quindi quando vuoi che il bordo mostri, basta cambiarne il colore.

Nel caso in cui il contenuto del tuo divsia reso in modo dinamico e desideri impostarne l'altezza, puoi usare un semplice trucco con outline:

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

button:hover {
    outline-color: transparent;
}

Esempio qui: https://codepen.io/Happysk/pen/zeQzaZ

Puoi provare un riquadro box-shadow

qualcosa del genere: box-shadow: inset 0px -5px 0px 0px #fff

aggiunge un bordo bianco 5px nella parte inferiore dell'elemento senza aumentare le dimensioni