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

Cela est également utile dans ce scénario. Cela vous permet de définir des bordures sans changer la largeur de la 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+ */
}

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

Answer 2

Si vous n'avez pas de border-radius, changez border en outline :

outline: 1px solid black;

Answer 3

Après avoir utilisé bon nombre de ces solutions, je trouve que l'astuce de définir border-color: transparent est la plus flexible et la plus largement prise en charge :

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

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

Pourquoi c'est mieux :

• Pas besoin de coder en dur la largeur de l'élément
• Excellent support inter-navigateurs (seul IE6 manque à l'appel)
• Contrairement à outline, vous pouvez toujours spécifier, par exemple, les bordures supérieure et inférieure séparément
• Contrairement au fait de définir la couleur de la bordure comme celle de l'arrière-plan, vous n'avez pas besoin de mettre à jour cela si vous changez l'arrière-plan, et c'est compatible avec les arrière-plans non unis.

Answer 4

La propriété css border augmentera la taille "externe" de tous les éléments, à l'exception des tds dans les tableaux. Vous pouvez vous faire une idée visuelle de son fonctionnement dans Firebug (interrompu), sous l'onglet html->layout.

Par exemple, un div avec une largeur et une hauteur de 10px et une bordure de 1px, aura une largeur et une hauteur extérieures de 12px.

Pour votre cas, afin de faire apparaître la bordure à l'intérieur du div, dans votre classe CSS sélectionnée, vous pouvez réduire la largeur et la hauteur de l'élément de deux fois la taille de votre bordure, ou vous pouvez faire de même pour le padding de l'élément.

Par exemple :

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

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

Answer 5

Définissez une bordure sur celle-ci avant de cliquer pour qu'elle soit de la même couleur que l'arrière-plan.

Ensuite, lorsque vous cliquez, changez simplement la couleur de l'arrière-plan et la largeur ne changera pas.