가장자리가 아닌 div 내부에 테두리 배치

나는이 <div>요소를 나는 그것을에 테두리를 넣고 싶다. 나는 쓸 수 있다는 것을 알고 style="border: 1px solid black"있지만 이것은 div의 양쪽에 2px를 추가하는데, 이것은 내가 원하는 것이 아닙니다.

오히려이 테두리를 div 가장자리에서 -1px로 설정하십시오. div 자체는 100px x 100px이며 테두리를 추가하면 테두리가 나타나도록 수학을 수행해야합니다.

테두리를 표시하고 상자가 여전히 100px (국경 포함)인지 확인하는 방법이 있습니까?

box-sizing속성을 border-box다음으로 설정하십시오 .

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 20px solid #f00;
    background: #00f;
    margin: 10px;
}

div + div {
    border: 10px solid red;
}

<div>Hello!</div>
<div>Hello!</div>

IE8 이상 에서 작동합니다 .

상자 그림자를 다음과 같이 사용할 수도 있습니다.

div{
    -webkit-box-shadow:inset 0px 0px 0px 10px #f00;
    -moz-box-shadow:inset 0px 0px 0px 10px #f00;
    box-shadow:inset 0px 0px 0px 10px #f00;
}

예 여기 : http://jsfiddle.net/nVyXS/ (보기 국경 호버)

이것은 최신 브라우저에서만 작동합니다. 예 : IE 8이 지원되지 않습니다. 자세한 내용은 caniuse.com (상자 그림자 기능) 을 참조하십시오.

아마 뒤늦은 대답이지만, 나는 나의 발견과 공유하고 싶다. 나는이 문제에 대한 두 가지 새로운 접근법을 찾았습니다.

box-shadowCSS 속성을 통한 내부 테두리

예, 상자 그림자는 요소에 상자 그림자를 추가하는 데 사용됩니다. 하지만 당신은 지정할 수 있습니다 inset오히려 그림자 같은 내부 경계처럼 보일 것이다, 그림자. 가로 및 세로 그림자를로 설정 0px하고 " spread"속성 box-shadow을 원하는 테두리 너비로 설정하면됩니다. 그래서 10px의 '내부'테두리 다음을 작성합니다 :

div{
    width:100px;
    height:100px;
    background-color:yellow;
    box-shadow:0px 0px 0px 10px black inset;
    margin-bottom:20px;
}

다음은 border와 'normal'테두리 의 차이점을 보여주는 jsFiddle 예제입니다 box-shadow. 이렇게하면 테두리와 상자 너비가 테두리를 포함하여 총 100px입니다.

더 많은 약 상자 그림자 : 여기

개요 CSS 속성을 통한 테두리

여기에 또 다른 접근 방법이 있지만 이렇게하면 테두리가 상자 외부에 있습니다. 여기 예가 있습니다. 예제에서 다음과 같이 css outline속성을 사용 하여 요소의 너비와 높이에 영향을 미치지 않는 테두리를 설정할 수 있습니다 . 이렇게하면 테두리 너비가 요소 너비에 추가되지 않습니다.

div{
   width:100px;
   height:100px;
   background-color:yellow;
   outline:10px solid black;
}

개요에 대한 추가 정보 : 여기

야후! 이것은 실제로 가능합니다. 찾았어요.

아래쪽 테두리를 들면 :

div {box-shadow: 0px -3px 0px red inset; }

위쪽 테두리 경우 :

div {box-shadow: 0px 3px 0px red inset; }

의사 요소 사용 :

.button {
    background: #333;
    color: #fff;
    float: left;
    padding: 20px;
    margin: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
}

<div class='button'>Hello</div>

::after당신을 사용 하여 선택한 요소의 가상 마지막 자식을 스타일링하고 있습니다. content속성은 익명의 생성 대체 요소를 .

우리는 부모에 대한 절대 위치를 사용하여 의사 요소를 포함하고 있습니다. 그런 다음 주요 요소의 배경에 사용자 정의 배경 및 / 또는 테두리를 자유롭게 가질 수 있습니다.

이 방법은을 사용하는 것과 다른 주 요소의 내용을 배치하는 데 영향을 미치지 않습니다 box-sizing: border-box;.

이 예제를 고려하십시오.

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    border: 5px solid #f00;
    border-left-width: 20px;
    box-sizing: border-box;
}

<div class='parent'>
    <div class='button'>Hello</div>
</div>

여기서 .button너비는 부모 요소를 사용하여 제한됩니다. 설정을 border-left-width조정합니다 내용 상자 크기 때문에 텍스트의 위치를.

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
    border-left-width: 20px;
}

<div class='parent'>
    <div class='button'>Hello</div>
</div>

유사 요소 접근 방식을 사용하더라도 내용 상자 크기에는 영향을 미치지 않습니다.

응용에 따라 의사 요소를 사용하는 접근 방식이 바람직한 동작 일 수도 있고 아닐 수도 있습니다.

이 질문은 이미 충분히 솔루션은 사용하여 대답되었지만 box-shadow및 outline속성을, 나는 약간와 내부의 경계에 대한 솔루션을 찾고 (자신처럼) 여기에 착륙 한 모든 사람들이에 확장하고자하는 오프셋

따라서 검은 색 100px x 100px div이고 흰색 테두리로 삽입해야 한다고 가정합니다 ( 내부 오프셋 이 5px 임)-여전히 위의 속성으로 수행 할 수 있습니다.

상자 그림자

여기서의 트릭은 첫 번째 그림자가 맨 위에 있고 후속 그림자의 z 순서가 낮은 여러 개의 상자 그림자가 허용된다는 것입니다.

그 지식으로, 상자 그림자 선언은 다음과 같습니다

box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white;

div {
  width: 100px;
  height: 100px;
  background: black;
  box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white; 
}

<div></div>

기본적으로 그 선언은 마지막 (10px 흰색) 그림자를 먼저 렌더링 한 다음 이전 5px 검은 그림자를 그 위에 렌더링합니다.

윤곽선 오프셋이 있는 윤곽선

위와 동일한 효과를 위해 개요 선언은 다음과 같습니다.

outline: 5px solid white;
outline-offset: -10px;

div {
  width: 100px;
  height: 100px;
  background: black;
  outline: 5px solid white;
  outline-offset: -10px;
}

<div></div>

주의 : 그것이 중요하다면 outline-offset IE는 지원하지 않습니다 .

코드 펜 데모

일반을 사용하는 대신 속성 outline과 outline-offset음수 값을 사용할 수 있습니다 border.

div{
    height: 100px;
    width: 100px;
    background-color: grey;
    margin-bottom: 10px; 
}

div#border{
    border: 2px solid red;
}

div#outline{
    outline: 2px solid red;
    outline-offset: -2px;
}

Using a regular border.
<div id="border"></div>

Using outline and outline-offset.
<div id="outline"></div>

나는 이것이 다소 오래되었다는 것을 알고 있지만 "국경 내부"라는 키워드가 바로 여기에 도착했기 때문에 여기에 언급 할 가치가있는 몇 가지 발견 사항을 공유하고 싶습니다. 호버 상태에 테두리를 추가 할 때 OP가 말하는 효과를 얻었습니다. 테두리는 상자의 크기에 픽셀을 광고하여 깜짝 놀랐습니다. IE7에서도 작동하는 두 가지 방법이 있습니다.

1) 요소에 테두리가 이미 붙어 있고 색상을 변경하기 만하면됩니다. 이런 식으로 수학이 이미 포함되어 있습니다.

div {
   width:100px;
   height:100px;
   background-color: #aaa;
   border: 2px solid #aaa; /* notice the solid */
}

div:hover {
   border: 2px dashed #666;
}

2) 음수 여백으로 테두리를 보정합니다. 그래도 여분의 픽셀이 추가되지만 요소의 위치가 급상승하지 않습니다.

div {
   width:100px;
   height:100px;
   background-color: #aaa;
}

div:hover {
  margin: -2px;
  border: 2px dashed #333;
}

새 브라우저와 기존 브라우저간에 일관된 렌더링을하려면 너비가있는 외부, 테두리가있는 내부를 이중 컨테이너로 추가하십시오.

<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>

이것은 여분의 마크 업보다 정확한 너비가 더 중요한 경우에만 가능합니다!

상자 크기 조정을 사용하는 경우 border-box는 테두리, 패딩, 여백 등을 의미하지 않습니다. 모든 요소는 부모 요소 안에 들어갑니다.

div p {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 150px;
    height:100%;
    border: 20px solid #f00;
    background-color: #00f;
    color:#fff;
    padding: 10px;
  
}

<div>
  <p>It was popularised in the 1960s with the release of Letraset sheets</p>
</div>

@Steve와 같은 최고의 크로스 브라우저 솔루션 (주로 IE 지원용)은 너비와 높이를 div로 98px로 주변에 1px를 추가하거나 div 100x100px로 배경 이미지를 만들고 그 위에 테두리를 그릴 수 있다고 말했습니다.

오프셋으로 개요를 볼 수 있지만 div에 패딩이 필요합니다. 또는 테두리 div를 절대 안에 배치 할 수 있습니다.

<div id='parentDiv' style='position:relative'>
  <div id='parentDivsContent'></div>
  <div id='fakeBordersDiv' 
       style='position: absolute;width: 100%;
              height: 100%;
              z-index: 2;
              border: 2px solid;
              border-radius: 2px;'/>
</div>

원하는대로 가짜 테두리 div에 여백을 두들겨 야 할 수도 있습니다.

더 현대적인 솔루션은 CSS를 사용에 수 있습니다 variables및 calc. calc널리 지원되지만 variables아직 IE11에는 없습니다 (폴리 필 사용 가능).

:root {
  box-width: 100px;
  border-width: 1px;
}

#box {
  width: calc(var(--box-width) - var(--border-width));
}

이것은 일부 계산을 사용하지만 원래 질문은 피하려고했습니다. CSS 자체에 의해 제어되므로 계산을 사용하는 것이 좋습니다. 또한 나중에 추가로 필요할 수있는 다른 CSS 속성을 추가로 마크 업하거나 잘못 사용할 필요가 없습니다.

이 솔루션은 고정 높이가 필요하지 않은 경우에만 실제로 유용 합니다 .

위에서 언급하지 않은 한 가지 해결책은 입력에 패딩을 한 경우 99 %의 시간입니다. 당신은 라인을 따라 뭔가를 할 수 있습니다 ...

input {
  padding: 8px;
}

input.invalid {
  border: 2px solid red;
  padding: 6px; // 8px - border or "calc(8px - 2px)"
}

내가 좋아하는 것은 각면에 테두리 + 패딩 + 전환 속성의 전체 메뉴가 있다는 것입니다.