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

128

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

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

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

Nachiket
источник

Ответы:

49

Свойство 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 */
}
Шон Амос
источник
thnx, у меня был класс .dragdrop-selected, но он использовался всеми перетаскиваемыми объектами, и у меня было 3 разных размера (3 разных типа) Dragable объекта, поэтому я сохранил отступы во всех 3 И установил отступы в .dragdrop-selected. . & это сработало. :)
Начикет
Это не лучшее решение для адаптивного дизайна. Использование outlineграницы или границы того же цвета, что и фон (и изменение ее цвета на другой, когда она выбрана) более гибкая.
AliBZ
1
Но предположим, что вам нужно избегать жесткого кодирования ширины, чтобы позволить элементу течь или реагировать на ширину окна просмотра: см. Мой ответ, используяborder-color: transparent
Эдвард Ньюэлл,
Нет необходимости в этих вычислениях, просто установите для размера поля значение border-box. См. Ответ Эйфрансиса ниже и эту статью .
jbyrd
Вы уверены в тд в таблицах? В Chrome все еще кажется, что размер увеличивается.
Protector one
105

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

ejfrancis
источник
4
box-sizing: border-box действительно должен быть установлен для всего в соответствии с современной передовой практикой. См. Paulirish.com/2012/box-sizing-border-box-ftw
jbyrd
6
В некоторых случаях это не работает; не совсем уверен, почему. См .: codepen.io/anon/pen/QZaBQG
Уилсон Биггс
51

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

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

corymathews
источник
3
Гениальный! Хотел бы я сам подумать об этом.
Риджул Гупта,
9
Ага, а если у вас нет сплошного фона? См. Мой ответ с помощьюborder-color: transparent
Эдвард Ньюэлл
44

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

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

chowey
источник
Это здорово, но по сравнению с границей здесь нет «контура-слева, ...», не для меня.
Imskull
2
Тогда я рекомендую использовать box-shadowв моей другой ответ на подобный вопрос. У него нет такой же поддержки браузера, но в наши дни это не проблема.
chowey
Спасибо, #chowey, только что реализовано, box-shadowможет также поддерживать одностороннюю границу, идеальное решение.
Imskull
border-color: transparentимеет лучшую кроссбраузерную поддержку --- см. мой ответ ...
Эдвард Ньюэлл
1
Этот комментарий недооценен. Это отличный способ создать рамку вокруг элемента, не изменяя его размер!
Себастьян Немет
42

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

outline: 1px solid black;
panwp
источник
8
Работает, если у вас нет границы радиуса.
Жан-Мари Дальмассо
28

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

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

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

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

  • Нет необходимости жестко задавать ширину элемента
  • Отличная кроссбраузерная поддержка (отсутствует только IE6)
  • В отличие от with outline, вы можете указать, например, верхнюю и нижнюю границы отдельно.
  • В отличие от настройки цвета границы как фона, вам не нужно обновлять это, если вы меняете фон, и он совместим с не сплошным цветным фоном.
Эдвард Ньюэлл
источник
1
Я обнаружил, что это лучше всего работает с элементами динамического размера в моем UX. Полностью остановлено изменение размера на MouseOver! Спасибо, мистер Ньюэлл!
d3r3kk
Гениальное. Спасибо вам!
Harald Hoerwick
Это тот самый!
пока верно
transparentвот какая необходимость!
dimpiax
Это то, что мне нужно (Y)
HaxxanRaxa
20

Попробуй это

box-sizing: border-box;
Хоанг Чунг
источник
4
Это должен быть ответ, просто грязь.
Spets
Почему это не везде работает? Например, codepen.io/anon/pen/QZaBQG
Том
привет @Tom, я не уверен, почему это еще не работает. Но в вашем случае, пожалуйста, подумайте об удалении высоты в контейнере и вместо этого используйте заполнение. Могу решить вашу проблему.
Хоанг Чунг
17

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

.good-border {
  padding: 1px;
}

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

введите описание изображения здесь

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

Тхо
источник
1
Можете ли вы сказать мне, что на самом деле происходит, я сбит с толку, почему при плохом наведении границы здесь смещается вниз, когда вы наводите на нее курсор?
Сурадж Джайн
@SurajJain Потому что размер div с "плохой границей" будет изменен (добавлен 1 пиксель границы) при наведении на него курсора.
Tho
6

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

Садат
источник
3

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

.bottom-border {
  box-shadow:inset 0px -3px 0px #000;
}
Люк Тейлор
источник
3

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

.border-me {
    position: relative;
}

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

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

Джек Гай
источник
1
У меня была граница 1px , что я хотел изменить в 2px, и единственный способ , которым я мог найти , чтобы сделать это было путем удаления widthи heightи добавления bottomи leftсвойства в дополнение к topи left, все из которых должны быть установлены по ширине противоположностью исходная граница (в моем случае -1px). Отличный хак
Чейз Сандманн,
2

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

Арун
источник
2

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

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

width: calc(100% - 2px);

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

Раджив Сингх
источник
1
.filter_list_button_remove {
    border: 1px solid transparent; 
    background-color: transparent;
}
.filter_list_button_remove:hover {
    border: 1px solid; 
}
peevo
источник
1
Я думаю, что было бы более полезно для OP и других посетителей, если бы вы добавили некоторые пояснения к своему намерению.
Репортер
1

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

Мэтт Каратиловлы
источник
1
Да, но предположим, что ваш фон не сплошной цвет ... см. Мой ответ, основанный на использованииborder-color: transparent
Эдвард Ньюэлл
Или все вместе, какul li a{border-bottom:2px solid transparent;} ul li a:hover{border-bottom:2px solid red;}
stackunderflow
0

Если ваш контент 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

Матуш Штястны
источник
К сожалению, у контура нет закругленных углов :(
M3RS 05
0

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

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

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

Mzard31
источник