Коли до розділу div додається 1 px межа, розмір Div збільшується, не хочу цього робити

Після натискання я додаю, 1px межа до div, тому розмір Div збільшується на 2px X 2px. Я не хочу збільшувати розмір div. Чи є простий спосіб зробити це?

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

EDIT:
Зменшення висоти / ширини при виборі, але як збільшити його назад. Використовуючи якісь сторонні рамки, тому не майте події, коли DIV втрачає вибір.

Властивість border css збільшуватиме всі елементи "зовнішнього" розміру, виключаючи tds у таблицях. Ви можете отримати наочне уявлення про те, як це працює в Firebug ( припинено) ), на вкладці html-> layout.

Так само, як приклад, div із шириною та висотою 10px та рамкою 1px матиме зовнішню ширину та висоту 12px.

У вашому випадку, щоб він виглядав так, що межа є на внутрішній стороні діва, у вибраному вами класі 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 пропущено)
• На відміну від 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;
}

Ви також можете зробити набагато більше з псевдоелементом, так що це досить потужна модель.

Спробуйте зменшити розмір поля при збільшенні межі

Мені потрібно було вміти "обмежувати" будь-який елемент, додаючи клас, а не впливати на його розміри. Хорошим рішенням для мене було використання коробки-тіні. Але в деяких випадках ефект не був помітний через інших братів і сестер. Тож я поєднав як типову тінь для коробки, так і тінь для вставки. В результаті виходить облямівка без зміни розмірів.

Значення, розділені комою. Ось простий приклад:

.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);

віднімання 2px для меж

.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: вставка 0px -5px 0px 0px #fff

додає білу рамку в 5 пікселів в нижній частині елемента, не збільшуючи розмір