Когда к div добавляется граница в 1 пиксель, размер Div увеличивается, не хочу этого делать

При щелчке я добавляю границу 1px к div, поэтому размер Div увеличивается на 2px X 2px. Я не хочу увеличивать размер div. Есть ли простой способ сделать это?

Беспорядочное подробное объяснение
На самом деле я добавляю DIV с float: left (такого же размера, как значки) в контейнер-div, поэтому все складываются один за другим, и когда (ширина контейнера-div составляет 300 пикселей), по ширине не остается места, поэтому дочерние DIV идут в следующей строке, так что это похоже на каталог, но из-за того, что увеличивается только выбранный размер DIV, DIV под выбранным DIV идет вправо и создает пустое пространство под выбранным DIV.

РЕДАКТИРОВАТЬ:
уменьшение высоты / ширины при выборе, но как увеличить ее обратно. Использование какой-либо сторонней структуры, поэтому не будет события, когда DIV теряет выбор.

Свойство border css увеличит "внешний" размер всех элементов, кроме tds в таблицах. Вы можете получить визуальное представление о том, как это работает в Firebug (поддержка прекращена ), на вкладке html-> layout.

Как пример, div с шириной и высотой 10 пикселей и границей в 1 пиксель будет иметь внешнюю ширину и высоту 12 пикселей.

В вашем случае, чтобы он выглядел так, как будто граница находится «внутри» div, в выбранном вами классе CSS вы можете уменьшить ширину и высоту элемента, удвоив размер границы, или вы можете сделать то же самое для обивка элементов.

Например:

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

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

Это также полезно в этом сценарии. это позволяет вам устанавливать границы без изменения ширины 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+ */
}

Взято с http://css-tricks.com/box-sizing/

установите на нем границу, прежде чем щелкнуть, чтобы она была того же цвета, что и фон.

Затем при нажатии просто измените цвет фона, а ширина не изменится.

Еще одно хорошее решение - использовать outlineвместо border. Он добавляет границу, не затрагивая блочную модель. Это работает в IE8 +, Chrome, Firefox, Opera, Safari.

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

Попробуйте изменить borderна outline:

outline: 1px solid black;

Пользуясь многими из этих решений, я считаю, что уловка настройки border-color: transparentявляется наиболее гибкой и широко поддерживаемой:

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

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

Почему лучше:

• Нет необходимости жестко задавать ширину элемента
• Отличная кроссбраузерная поддержка (отсутствует только IE6)
• В отличие от with outline, вы можете указать, например, верхнюю и нижнюю границы отдельно.
• В отличие от настройки цвета границы как фона, вам не нужно обновлять это, если вы меняете фон, и он совместим с не сплошным цветным фоном.

Попробуй это

box-sizing: border-box;

Обычно я использую отступы, чтобы решить эту проблему. Отступ будет добавлен, когда граница исчезнет, ​​и удален, когда граница появится. Образец кода:

.good-border {
  padding: 1px;
}

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

Посмотреть мой полный пример кода на JSFiddle: https://jsfiddle.net/3t7vyebt/4/

Просто уменьшите ширину и высоту вдвое больше ширины границы.

Вы можете делать какие-то необычные вещи с помощью вставных теней. Пример установки границы внизу элемента без изменения его размера:

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

Иногда вы не хотите, чтобы высота или ширина изменялись без явной настройки. В этом случае я считаю полезным использовать псевдоэлементы.

.border-me {
    position: relative;
}

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

Вы также можете сделать гораздо больше с псевдоэлементом, так что это довольно мощный шаблон.

Попробуйте уменьшить размер поля при увеличении границы

Мне нужно было иметь возможность «ограничивать» любой элемент, добавляя класс, и не влиять на его размеры. Хорошим решением для меня было использование box-shadow. Но в некоторых случаях эффект не был заметен из-за других братьев и сестер. Итак, я объединил как типичную тень блока, так и вставку тени блока. В результате получается рамка без изменения размеров.

Значения разделены запятой. Вот простой пример:

.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

Настройте свой предпочтительный вид, и все готово!

Мы также можем использовать функцию css calc ()

width: calc(100% - 2px);

вычитание 2 пикселей для границ

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

Вы можете создать элемент с рамкой того же цвета, что и ваш фон, а затем, когда вы хотите, чтобы граница отображалась, просто измените ее цвет.

Если ваш контент divотображается динамически, и вы хотите установить его высоту, вы можете использовать простой трюк outline:

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

button:hover {
    outline-color: transparent;
}

Пример здесь: https://codepen.io/Happysk/pen/zeQzaZ

Вы можете попробовать вставку box-shadow

примерно так: box-shadow: inset 0px -5px 0px 0px #fff

добавляет белую рамку 5 пикселей в нижнюю часть элемента без увеличения размера