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

Une autre bonne solution est d'utiliser outline au lieu de border. Il ajoute une bordure sans affecter le modèle de boîte. Cela fonctionne sur IE8+, Chrome, Firefox, Opera, Safari.

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

Answer 2

Je utilise généralement le padding pour résoudre ce problème. Le padding sera ajouté lorsque la bordure n'est pas là et retiré quand elle revient. Exemple:

.good-border {
  padding: 1px;
}

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

Consultez mon code ici: https://jsfiddle.net/3t7vyebt/4/

Answer 3

Essayez ceci

box-sizing: border-box;

Answer 4

Parfois, vous ne voulez pas que la hauteur ou la largeur soit affectée sans les définir explicitement. Dans ce cas, je trouve utile d'utiliser des pseudo-éléments.

.border-me {
    position: relative;
}

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

Vous pouvez également faire beaucoup plus avec le pseudo-élément, c'est donc un motif assez puissant.

Answer 5

Diminuez simplement la largeur et la hauteur de deux fois la largeur de la bordure