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;

저는 보통이 문제를 해결하기 위해 패딩을 사용합니다. 테두리가 사라지면 패딩이 추가되고 테두리가 나타나면 제거됩니다. 샘플 코드 :

.good-border {
  padding: 1px;
}

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

JSFiddle에서 전체 샘플 코드보기 : https://jsfiddle.net/3t7vyebt/4/

너비와 높이를 테두리 너비의 두 배로 줄입니다.

삽입 된 그림자로 멋진 일을 할 수 있습니다. 크기를 변경하지 않고 요소의 맨 아래에 테두리를 배치하는 예 :

.bottom-border {
  box-shadow:inset 0px -3px 0px #000;
}

때로는 명시 적으로 설정하지 않고 높이나 너비가 영향을받는 것을 원하지 않습니다. 이 경우 의사 요소를 사용하는 것이 도움이됩니다.

.border-me {
    position: relative;
}

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

의사 요소로 더 많은 작업을 수행 할 수 있으므로 이것은 매우 강력한 패턴입니다.

테두리를 늘릴 때 여백 크기를 줄여보십시오.

클래스를 추가하여 요소의 크기에 영향을주지 않고 "경계"할 수 있어야했습니다. 저에게 좋은 해결책은 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

선호하는 모양에 맞게 조정하면 좋습니다!

css calc () 함수를 사용할 수도 있습니다.

width: calc(100% - 2px);

테두리를 위해 2px 빼기

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

배경과 같은 색상의 테두리가있는 요소를 만든 다음 테두리를 표시하려면 해당 색상을 변경하면됩니다.

콘텐츠 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

상자 그림자 삽입을 시도 할 수 있습니다.

다음과 같이 : box-shadow : inset 0px -5px 0px 0px #fff

크기를 늘리지 않고 요소 하단에 흰색 5px 테두리를 추가합니다.