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

Au clic, j'ajoute, 1px frontière à div, donc la taille Div augmente de 2px X 2px. Je ne veux pas augmenter la taille des div. Existe-t-il un moyen simple de le faire?

Explication détaillée
désordonnée En fait, j'ajoute des DIV avec float: left (même taille, comme les icônes) à un conteneur-div, donc tout s'empile les uns après les autres, et quand (la largeur du conteneur-div est de 300px) il n'y a pas d'espace laissé dans le sens de la largeur, donc Les DIV enfants viennent dans la ligne suivante, donc c'est comme le catalogue, mais à cause de la bordure seule la taille DIV sélectionnée est augmentée, DIV sous DIV sélectionné va à droite et crée un espace vide sous DIV sélectionné.

EDIT:
Diminuer la hauteur / largeur sur la sélection, mais comment l'augmenter en arrière. En utilisant un framework tiers, donc ne pas avoir d'événement lorsque DIV perd la sélection.

La propriété border css augmentera la taille "externe" de tous les éléments, à l'exception des tds dans les tables. Vous pouvez avoir une idée visuelle de la façon dont cela fonctionne dans Firebug ( abandonné ), sous l'onglet html-> layout.

À titre d'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, pour donner l'impression que la bordure est à "l'intérieur" du div, dans la classe CSS sélectionnée, vous pouvez réduire la largeur et la hauteur de l'élément en doublant la taille de votre bordure, ou vous pouvez faire de même pour le rembourrage des éléments.

Par exemple:

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

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

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

Tiré de http://css-tricks.com/box-sizing/

définissez une bordure dessus avant de cliquer pour avoir la même couleur que l'arrière-plan.

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

Une autre bonne solution consiste à utiliser à la outlineplace 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 )

Essayez de changer borderpour outline:

outline: 1px solid black;

Ayant utilisé plusieurs de ces solutions, je trouve que l'utilisation de l'astuce de réglage border-color: transparentest 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 multi-navigateurs (seul IE6 a manqué)
• Contrairement à outline, vous pouvez toujours spécifier, par exemple, les bordures supérieure et inférieure séparément
• Contrairement à la définition de la couleur de la bordure pour qu'elle soit celle de l'arrière-plan, vous n'avez pas besoin de la mettre à jour si vous changez l'arrière-plan, et elle est compatible avec les arrière-plans de couleur non unie.

Essaye ça

box-sizing: border-box;

J'utilise généralement un rembourrage pour résoudre ce problème. Le remplissage sera ajouté lorsque la bordure disparaît et supprimée lorsque la bordure apparaît. Exemple de code:

.good-border {
  padding: 1px;
}

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

Voir mon exemple de code complet sur JSFiddle: https://jsfiddle.net/3t7vyebt/4/

Diminuez simplement la largeur et la hauteur du double de la largeur de la bordure

Vous pouvez faire des choses fantaisistes avec des ombres incrustées. Exemple pour mettre une bordure au bas d'un élément sans changer sa taille:

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

Parfois, vous ne voulez pas que la hauteur ou la largeur soient affectées sans définir explicitement non plus. 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 modèle assez puissant.

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

J'avais besoin de pouvoir "border" n'importe quel élément en ajoutant une classe et de ne pas affecter ses dimensions. Une bonne solution pour moi était d'utiliser box-shadow. Mais dans certains cas, l'effet n'était pas visible en raison d'autres frères et sœurs. J'ai donc combiné à la fois une ombre de boîte typique et une ombre de boîte encastrée. Le résultat est un aspect de bordure sans changer les dimensions.

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

Ajustez votre look préféré et vous êtes prêt à partir!

Nous pouvons également utiliser la fonction css calc ()

width: calc(100% - 2px);

soustraction de 2 pixels pour les bordures

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

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, changez simplement sa couleur.

divSi le contenu de votre est rendu dynamiquement et que vous souhaitez 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

Vous pouvez essayer un encadré d'ombre de boîte

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

ajoute une bordure blanche de 5 pixels au bas de l'élément sans augmenter la taille