내부 테두리를 추가할 때 Div의 크기를 변경하지 않고 유지하는 방법은 무엇입니까?

크기를 확장하지 않고 Div 내부에 테두리를 배치하는 방법은 무엇입니까?

테두리가 있는 요소의 경우 기본 동작은 요소의 너비와 높이 모두에 테두리 두께를 추가하는 것입니다. 그러나 div의 기존 크기 내에 테두리를 표시하려는 시나리오가 발생할 수 있습니다.

이 효과를 얻으려면 box-sizing 속성을 사용하여 border-box:

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

box-sizing을 border-box로 설정하면 div의 너비와 높이에 테두리 두께가 포함되어 테두리가 내부에 나타나는 동안 보이는 상자는 동일한 크기로 유지됩니다. 가장자리:

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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 {

box-sizing: border-box;
border: 10px solid red;

}

&l t;div>안녕하세요!

안녕하세요!

위 내용은 내부 테두리를 추가할 때 Div의 크기를 변경하지 않고 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!