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

Question

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

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

Грязный Подробное Объяснение

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

EDIT:

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

570 16

html css border

16 ответов:

Comments

Ничего не найдено.

Sean Amos · Accepted Answer · 2010-07-15 13:37:07

свойство 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 */
}

ejfrancis · Accepted Answer · 2013-01-08 21:47:00

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

corymathews · Accepted Answer · 2010-07-15 15:53:39

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

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

chowey · Accepted Answer · 2017-05-23 15:02:22

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

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

panwp · Accepted Answer · 2015-02-21 10:55:50

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

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

Edward Newell · Accepted Answer · 2016-04-30 07:09:24

использовав многие из этих решений, я нахожу, используя трюк настройки border-color: transparent чтобы быть наиболее гибким и широко поддерживается:
.some-element {
    border: solid 1px transparent;
}

.some-element-selected {
    border: solid 1px black;
}
почему это лучше:

не нужно жестко кодировать ширину элемента

отличная поддержка кросс-браузера (только IE6 пропустил)

в отличие от outline, вы все еще можете указать, например, верхнюю и нижнюю границы отдельно

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

Hoang Trung · Accepted Answer · 2018-03-01 07:23:10

попробуй такое
box-sizing: border-box;

12

2018-03-01 07:23:10

ThoQ · Accepted Answer · 2016-09-14 05:07:27

Я обычно использую прокладки для решения этой проблемы. Заполнение будет добавлено при исчезновении границы и удалено при появлении границы. Пример кода:
.good-border {
  padding: 1px;
}

.good-border:hover {
  padding: 0px;
  border: 1px solid blue;
}
просмотрите мой полный пример кода на JSFiddle:https://jsfiddle.net/3t7vyebt/4/

Sadat · Accepted Answer · 2010-07-15 13:20:12

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

arun · Accepted Answer · 2010-07-15 13:20:39

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

Luke Taylor · Accepted Answer · 2016-03-17 01:45:49

вы можете сделать некоторые причудливые вещи с вставкой теней. Пример размещения границы в нижней части элемента без изменения его размера:
.bottom-border {
  box-shadow:inset 0px -3px 0px #000;
}

Harangue · Accepted Answer · 2016-07-16 01:59:25

иногда вы не хотите, чтобы высота или ширина были затронуты без явной установки либо. В этом случае, я считаю полезным использовать псевдо-элементы.
.border-me {
    position: relative;
}

.border-me::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: solid 1px black;
}
вы также можете сделать намного больше с псевдо-элементом, так что это довольно мощный шаблон.

Chris · Accepted Answer · 2016-09-08 21:04:26

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

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

peevo · Accepted Answer · 2014-08-11 14:31:05

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

Matt Karatilovly · Accepted Answer · 2015-02-23 11:16:21

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

Rajeev Singh · Accepted Answer · 2018-07-08 12:44:33

мы также можем использовать функцию css calc ()
width: calc(100% - 2px);
вычитание 2px для границ