Quando uma borda de 1 px é adicionada à div, o tamanho da div aumenta. Não é necessário fazer isso

Ao clicar em estou adicionando, borda de 1px a div, então o tamanho da Div aumenta em 2px X 2px. Eu não quero aumentar o tamanho da div. Existe alguma maneira simples de fazer isso?

Explicação detalhada bagunçada
Na verdade, estou adicionando DIVs com float: left (left size, like icons) a um container-div, para que tudo seja empilhado um após o outro e quando (a largura do container-div for 300px), não haverá espaço na largura, portanto DIVs filhos vem na próxima linha, portanto, é semelhante ao catálogo, mas devido ao tamanho apenas do DIV selecionado da borda aumentar, o DIV no DIV selecionado vai para a direita e cria um espaço vazio abaixo do DIV selecionado.

EDIT:
Diminuindo Altura / Largura na seleção, mas como aumentá-lo de volta. Usando alguma estrutura de terceiros, não tenha evento quando o DIV perder a seleção.

A propriedade border css aumentará o tamanho "externo" de todos os elementos, excederá tds nas tabelas. Você pode ter uma idéia visual de como isso funciona no Firebug ( descontinuado ), na guia html-> layout.

Apenas como exemplo, uma div com largura e altura de 10px e borda de 1px terá largura e altura externas de 12px.

No seu caso, para fazer parecer que a borda está no "interior" da div, na classe CSS selecionada, você pode reduzir a largura e a altura do elemento dobrando o tamanho da borda ou pode fazer o mesmo para os elementos preenchidos.

Por exemplo:

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

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

Isso também é útil nesse cenário. permite definir bordas sem alterar a largura da 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+ */
}

Retirado de http://css-tricks.com/box-sizing/

defina uma borda antes de clicar para ter a mesma cor do plano de fundo.

Então, quando você clicar, basta alterar a cor do plano de fundo e a largura não será alterada.

Outra boa solução é usar em outlinevez de border. Ele adiciona uma borda sem afetar o modelo da caixa. Isso funciona no IE8 +, Chrome, Firefox, Opera, Safari.

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

Tente mudar borderpara outline:

outline: 1px solid black;

Tendo usado muitas dessas soluções, acho que usar o truque da configuração border-color: transparenté o mais flexível e com amplo suporte:

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

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

Por que é melhor:

• Não é necessário codificar a largura do elemento
• Excelente suporte a vários navegadores (somente IE6 faltou)
• Ao contrário de outline, você ainda pode especificar, por exemplo, as bordas superior e inferior separadamente
• Ao contrário de definir a cor da borda como a do plano de fundo, você não precisará atualizá-la se alterar o plano de fundo, e ele é compatível com planos de fundo coloridos não sólidos.

Tente isto

box-sizing: border-box;

Eu normalmente uso preenchimento para resolver esse problema. O preenchimento será adicionado quando a borda desaparecer e removido quando a borda aparecer. Código de amostra:

.good-border {
  padding: 1px;
}

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

Veja meu código de exemplo completo no JSFiddle: https://jsfiddle.net/3t7vyebt/4/

Apenas diminua a largura e a altura pelo dobro da largura da borda

Você pode fazer coisas sofisticadas com sombras embutidas. Exemplo para colocar uma borda na parte inferior de um elemento sem alterar seu tamanho:

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

Às vezes, você não deseja que a altura ou a largura sejam afetadas sem definir explicitamente. Nesse caso, acho útil usar pseudo elementos.

.border-me {
    position: relative;
}

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

Você também pode fazer muito mais com o pseudo elemento, portanto esse é um padrão bastante poderoso.

Tente diminuir o tamanho da margem ao aumentar a borda

Eu precisava ser capaz de "delimitar" qualquer elemento adicionando uma classe e não afetando suas dimensões. Uma boa solução para mim foi usar o box-shadow. Mas, em alguns casos, o efeito não era visível devido a outros irmãos. Então, eu combinei tanto sombra de caixa típica quanto sombra de caixa inserida. O resultado é uma aparência de borda sem alterar nenhuma dimensão.

Valores separados por vírgula. Aqui está um exemplo simples:

.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

Ajuste a sua aparência preferida e pronto!

Também podemos usar a função css calc ()

width: calc(100% - 2px);

subtraindo 2px para bordas

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

Você pode criar o elemento com borda com a mesma cor do plano de fundo e, quando quiser que a borda apareça, basta alterar sua cor.

Caso seu conteúdo divseja renderizado dinamicamente e você queira definir sua altura, use um truque simples com outline:

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

button:hover {
    outline-color: transparent;
}

Exemplo aqui: https://codepen.io/Happysk/pen/zeQzaZ

Você pode tentar inserir uma caixa de sombra

algo como isto: box-shadow: inset 0px -5px 0px 0px #fff

adiciona uma borda branca de 5px à parte inferior do elemento sem aumentar o tamanho