div에 1px 테두리가 추가되면 Div 크기가 증가합니다. 클릭하면 div에 1px 테두리를 추가하므로 Div

클릭하면 div에 1px 테두리를 추가하므로 Div 크기가 2px X 2px만큼 증가합니다. div 크기를 늘리고 싶지 않습니다. 그렇게하는 간단한 방법이 있습니까?

지저분한 자세한 설명
실제로 float : left (아이콘과 같은 동일한 크기)를 사용하여 DIV를 container-div에 추가하고 있으므로 모두 차례로 쌓이고 (container-div 너비가 300px) 너비 방향으로 남은 공간이 없을 때 자식 DIV가 다음 행에 오므로 카탈로그와 비슷하지만 테두리 때문에 선택한 DIV 크기 만 증가하고 선택한 DIV 아래의 DIV가 오른쪽으로 이동하여 선택한 DIV 아래에 빈 공간을 만듭니다.

편집 :
선택시 높이 / 너비 감소,하지만 다시 늘리는 방법. 타사 프레임 워크를 사용하므로 DIV가 선택을 잃을 때 이벤트가 발생하지 않습니다.

답변

border css 속성은 테이블의 tds를 제외하고 모든 요소의 “외부”크기를 늘립니다. html-> layout 탭 에서 Firebug ( discontinued ) 에서 이것이 어떻게 작동하는지 시각적으로 알 수 있습니다 .

예를 들어, 너비와 높이가 10px이고 테두리가 1px 인 div는 외부 너비와 높이가 12px입니다.

귀하의 경우 테두리가 div의 “내부”에있는 것처럼 보이게하려면 선택한 CSS 클래스에서 테두리 크기의 두 배로 요소의 너비와 높이를 줄이거 나 동일한 작업을 수행 할 수 있습니다. 요소 패딩.

예 :

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

div.navitem .selected
{
    border: 1px solid;
    width: 13px;
    height: 13px;
    /* padding: 4px */
}

답변

이것은이 시나리오에서도 유용합니다. 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/ 에서 가져옴

답변

클릭하기 전에 배경과 동일한 색상으로 테두리를 설정하십시오.

그런 다음 클릭하면 배경색을 변경하면 너비가 변경되지 않습니다.

답변

또 다른 좋은 해결책은 사용하는 outline대신 border. 상자 모델에 영향을주지 않고 테두리를 추가합니다. 이것은 IE8 +, Chrome, Firefox, Opera, Safari에서 작동합니다.

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

답변

변경 시도 border에 outline:

outline: 1px solid black;

답변

이러한 솔루션을 많이 사용 border-color: transparent하면서 가장 유연하고 널리 지원되는 설정 방법 을 사용했습니다 .

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

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

더 나은 이유 :

  • 요소의 너비를 하드 코딩 할 필요가 없습니다.
  • 뛰어난 브라우저 간 지원 (IE6 만 놓 쳤음)
  • 와 달리 outline, 예를 들어 상단 및 하단 테두리를 별도로 지정할 수 있습니다.
  • 테두리 색상을 배경 색상으로 설정하는 것과 달리 배경을 변경하면이를 업데이트 할 필요가 없으며 단색이 아닌 색상 배경과 호환됩니다.

답변

이 시도 

box-sizing: border-box;