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

Ответ 1

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

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

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

Например:

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

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

Ответ 2

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

Ответ 3

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

Затем, когда вы нажимаете только изменить цвет фона, и ширина не изменится.

Ответ 4

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

(fooobar.com/questions/81201/...)

Ответ 5

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

outline: 1px solid black;

Ответ 6

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

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

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

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

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

Ответ 7

Попробуй это

box-sizing: border-box;

Ответ 8

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

.good-border {
  padding: 1px;
}

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

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

Ответ 9

Просто уменьшите ширину и высоту на два раза по ширине границы

Ответ 10

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

Ответ 11

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

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

Ответ 12

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

.border-me {
    position: relative;
}

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

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

Ответ 13

Мне нужно было "очертить" любой элемент, добавив класс и не влияя на его размеры. Хорошим решением для меня было использование 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

Откорректируйте свой предпочтительный вид, и вам будет хорошо!

Ответ 14

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

Ответ 15

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

Ответ 16

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

width: calc(100% - 2px);

вычитание 2px для границ

Ответ 17

Это работало для меня размер коробки: border-box;

если вы используете контур, то вы не можете использовать свойство радиуса границы

Ответ 18

Если содержимое вашего 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