div에 1px 테두리를 추가하면 div 크기가 증가합니다. 원하지 않습니다.

div에 1px 테두리를 추가하면 div 크기가 증가합니다. 원하지 않습니다.

이 질문에는 이미 다음과 같은 답이 있습니다.

가장자리가 아닌 div 내부에 테두리 배치 (15개 답변)

마감됨1년 전에.

추가합니다를 클릭하면 1px 경계가 div로 이동하므로 Div 크기가 2px X 2px 증가합니다.저는 div 사이즈를 늘리고 싶지 않습니다.그렇게 하는 간단한 방법이 있습니까?

지저분하고 상세한 설명
실제로 저는 float:left(아이콘과 같은 크기)를 가진 DIV를 container-div에 추가하고 있기 때문에 모든 것이 차례로 쌓이고, container-div 너비가 300px일 때는 공간이 남아 있지 않아 하위 DIV가 다음 행에 오게 되므로 카탈로그와 비슷하지만 테두리만 선택된 DIV 크기가 커집니다.선택한 DIV 아래의 DIV가 오른쪽으로 이동하여 선택한 DIV 아래에 빈 공간을 만듭니다.

편집:
선택 시 높이/폭을 줄이지만 다시 높이는 방법.일부 타사 프레임워크를 사용하므로 DIV가 선택을 잃었을 때 이벤트가 발생하지 않습니다.

이는 이 시나리오에서도 유용합니다.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/ 에서 발췌

만약 당신이 가지고 있지 않다면.border-radius바꾸다border로.outline:

outline: 1px solid black;

이러한 솔루션을 많이 사용해 본 결과, 설정의 요령을 알게 되었습니다.border-color: transparent가장 유연하고 광범위하게 지원됩니다.

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

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

더 나은 이유:

• 요소의 너비를 하드 코딩할 필요가 있습니다.
• 뛰어난 교차 브라우저 지원(IE6만 누락)
• 와는 달리outline위쪽 및 아래쪽 경계를 별도로 지정할 수 있습니다.
• 테두리 색을 배경의 색으로 설정하는 것과 달리 배경을 변경할 경우 이를 업데이트할 필요가 없으며 비고체 색상 배경과 호환됩니다.

배경과 동일한 색을 클릭하기 전에 테두리를 설정합니다.

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

경계 CSS 속성은 테이블의 stds를 제외한 모든 요소 "외부" 크기를 증가시킵니다.Firebug(중단됨)의 html-> 레이아웃 탭에서 이 기능이 어떻게 작동하는지 시각적으로 파악할 수 있습니다.

예를 들어, 너비와 높이가 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 */
}

또 다른 좋은 해결책은 사용하는 것입니다.outline에 border상자 모델에 영향을 주지 않고 테두리를 추가합니다.IE8+, 크롬, 파이어폭스, 오페라, 사파리.

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

저는 이 문제를 해결하기 위해 주로 패딩을 사용합니다.테두리가 없을 때 패딩이 추가되고, 테두리가 돌아올 때 패딩이 제거됩니다.예:

.good-border {
  padding: 1px;
}

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

여기에서 내 코드를 참조하십시오. https://jsfiddle.net/3t7vyebt/4/

사용해 보세요.

box-sizing: border-box;

때로는 명시적으로 설정하지 않고 높이나 너비가 영향을 받지 않도록 할 수도 있습니다.그럴 경우, 저는 의사 요소를 사용하는 것이 도움이 된다고 생각합니다.

.border-me {
    position: relative;
}

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

또한 유사 요소를 사용하여 훨씬 더 많은 작업을 수행할 수 있기 때문에 매우 강력한 패턴입니다.

너비와 높이를 테두리 너비의 두 배로 줄이기만 하면 됩니다.

그림자가 들어간 화려한 것들을 할 수 있습니다.크기를 변경하지 않고 요소의 맨 아래에 테두리를 배치하는 예:

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

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

저는 클래스를 추가하여 요소의 크기에 영향을 미치지 않고 "경계"를 지정할 수 있어야 했습니다.저에게 좋은 해결책은 박스 섀도우를 사용하는 것이었습니다.그러나 어떤 경우에는 다른 형제자매들 때문에 그 효과가 보이지 않았습니다.그래서 저는 일반적인 상자 그림자와 삽입된 상자 그림자를 결합했습니다.결과적으로 치수를 변경하지 않고 테두리 모양을 만들 수 있습니다.

쉼표로 구분된 값입니다.다음은 간단한 예입니다.

.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);
}

jfiddle

원하는 모양에 맞게 조정하면 바로 시작할 수 있습니다!

우리는 또한 css calc() 함수를 사용할 수 있습니다.

width: calc(100% - 2px);

테두리에 대해 2자리 빼기

박스섀도 인셋을 사용해볼 수 있습니다.

이와 같은 것: 박스 포장: 삽입 0도 -5도 0도 0도 #fff.

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

.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

언급URL : https://stackoverflow.com/questions/3254587/when-1-px-border-is-added-to-div-div-size-increases-dont-want-to-do-that