lavezzi1
@lavezzi1

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

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

Есть решения как можно исправить?
  • Вопрос задан
  • 2128 просмотров
Решения вопроса 1
@chirskiy_mixail
Очень давно занимаюсь версткой, имею огромный опыт
Я обычно использовал Box-shadow, и все работает без проблем, св-во box-sizing, решает вашу проблему, ну тогда надо изначально всем блокам задавать border: 2px solid transparent, а у выделенного элемента уже менять на цвет, border-color: #333; к примеру, ну я бы советовал тень, там и нет проблем с расположением сверху, снизу или слева или справа, решать конечно вам.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 4
Taraflex
@Taraflex
Ищу работу. Контакты в профиле.
box-sizing:border-box (+ не забыть префиксы)
Ответ написан
Комментировать
archelon
@archelon
используйте свойство css box-sizing: border-box;
htmlbook.ru/css/box-sizing
Ответ написан
Комментировать
@esvlad
Веб-разработчик
Используйте outline

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

подробнее htmlbook.ru/css/outline
Ответ написан
Stalker_RED
@Stalker_RED
Еще вариант, сделать border у всех блоков, и только менять цвет.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы