Lorsqu'une bordure de 1 px est ajoutée à la div, la taille de la div augmente, ce que je ne veux pas faire

Question

En cliquant, j'ajoute une bordure de 1px au div, donc la taille du div augmente de 2px X 2px. Je ne veux pas que la taille du div augmente. Existe-t-il un moyen simple de le faire?

Explication Désordonnée
En fait, j'ajoute des DIV avec float:left (de même taille, comme des icônes) à un container-div, donc tous s'empilent les uns après les autres, et lorsque (la largeur du container-div est de 300px) il n'y a plus d'espace en largeur, les DIV enfants passent à la ligne suivante, c'est donc un peu comme un catalogue, mais à cause de la bordure seulement la taille du DIV sélectionné augmente, le DIV sous le DIV sélectionné va sur la droite et crée un espace vide en dessous du DIV sélectionné.

MODIFIER:
Réduire la hauteur/la largeur lors de la sélection, mais comment l'augmenter à nouveau. J'utilise un framework tiers, donc je n'ai pas d'événement lorsque le DIV perd la sélection..

Answer 1

.filter_list_button_remove {
    bordure: 1px solide transparent; 
    couleur-de-fond: transparent;
}
.filter_list_button_remove:hover {
    bordure: 1px solide; 
}

Answer 2

Vous pouvez créer l'élément avec une bordure de la même couleur que votre arrière-plan, puis lorsque vous voulez que la bordure s'affiche, il suffit de changer sa couleur.

Answer 3

Si le contenu de votre div est rendu de manière dynamique et que vous voulez définir sa hauteur, vous pouvez utiliser une astuce simple avec outline:

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

button:hover {
    outline-color: transparent;
}

Exemple ici : https://codepen.io/Happysk/pen/zeQzaZ