Border добавляет ширины элементу, как избежать?

Question

[lavezzi1]

Здравствуйте!
Есть сетка из блоков, при клике добавляю класс с border: 2px, чтобы выделить выбранный объект. Естесственно рамка добавляет эти два пикселя со всех сторон и выделенный объект отодвигает близлежайщие объекты, от этого сетка криво смотрится.

Есть решения как можно исправить?

Answer 1

[Михаил Чирский]

Я обычно использовал Box-shadow, и все работает без проблем, св-во box-sizing, решает вашу проблему, ну тогда надо изначально всем блокам задавать border: 2px solid transparent, а у выделенного элемента уже менять на цвет, border-color: #333; к примеру, ну я бы советовал тень, там и нет проблем с расположением сверху, снизу или слева или справа, решать конечно вам.

Answer 2

[Александр Таратин]

box-sizing:border-box (+ не забыть префиксы)

Answer 3

[archelon]

используйте свойство css box-sizing: border-box;
htmlbook.ru/css/box-sizing

Answer 4

[Владислав Старцев]

Используйте outline

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

подробнее htmlbook.ru/css/outline

Comments

[Магжан Биргебайулы]

Только вот минус в том, что нельзя задать отдельно. Типа: outline-top: 1px solid black;

[Владислав Старцев]

Магжан Биргебайулы: да, есть такой минус, но как я понял в вопросе нет нужды задавать границу с какой-то одной стороны.

Answer 5

[Stalker_RED]

Еще вариант, сделать border у всех блоков, и только менять цвет.