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

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

97 голосов
/ 15 июля 2010

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

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

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

Ответы [ 17 ]

91 голосов
/ 08 января 2013

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

46 голосов
/ 15 июля 2010

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

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

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

Например: 

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

div.navitem .selected
{
    border: 1px solid;
    width: 13px;
    height: 13px;
    /* padding: 4px */
}
40 голосов
/ 15 июля 2010

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

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

35 голосов
/ 04 марта 2013

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

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

24 голосов
/ 21 февраля 2015

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

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

23 голосов
/ 30 апреля 2016

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

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

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

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

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

Попробуйте это 

box-sizing: border-box;
13 голосов
/ 14 сентября 2016

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

.good-border {
  padding: 1px;
}

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

enter image description here

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

5 голосов
/ 15 июля 2010

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

2 голосов
/ 08 сентября 2016

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

Отрегулируйте ваш предпочтительный вид, и вы готовы!

Страница:
...