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

Vous pouvez faire quelques choses élégantes avec des ombres internes. Exemple pour mettre une bordure sur le bas d'un élément sans changer sa taille :

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

Answer 2

Essayez de réduire la taille de la marge lorsque vous augmentez la bordure

Answer 3

Je devais pouvoir "border" n'importe quel élément en ajoutant une classe et sans affecter ses dimensions. Une bonne solution pour moi a été d'utiliser box-shadow. Mais dans certains cas, l'effet n'était pas visible en raison d'autres éléments frères. J'ai donc combiné à la fois la box-shadow typique et la box-shadow insérée. Le résultat est un aspect de bordure sans changer aucune dimension.

Valeurs séparées par une virgule. Voici un exemple simple:

.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

Adaptez selon votre préférence et vous êtes prêt à partir!

Answer 4

Nous pouvons également utiliser la fonction css calc()

width: calc(100% - 2px);

soustraire 2px pour les bordures

Answer 5

Vous pouvez essayer une ombre de boîte encastrée

quelque chose comme ceci: box-shadow:inset 0px -5px 0px 0px #fff

ajoute une bordure blanche de 5px en bas de l'élément sans augmenter la taille