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

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

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

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

73
border css html

16 ответов

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

Как пример, 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 */
}
37

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

81

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

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

34

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

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

28

попробуйте изменить границу для контура.

контур: 1px сплошной черный;

19

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

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

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

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

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

попробуй такое 

box-sizing: border-box;
12

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

.good-border {
  padding: 1px;
}

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

enter image description here

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

10

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

5

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

2

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

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

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

.border-me {
    position: relative;
}

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

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

2

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

настройки для вашего предпочитаемый взгляд, и вы хорошо идти!

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

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

1

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

width: calc(100% - 2px);

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

1