`box-sizing: border-box`에도 불구하고 인라인 블록 요소가 컨테이너를 오버플로하는 이유는 무엇입니까?

인라인 블록 상자 과적합 컨테이너

CSS에서 인라인 블록 요소는 본질적으로 추가 간격으로 렌더링됩니다. 이로 인해 예상치 못한 오버플로 또는 컨테이너 래핑이 발생할 수 있습니다.

다음 예를 고려하세요.

.ok {
  width: 300px;
  background: red;
  height: 100px;
  box-sizing: border-box;
}

.box {
  display: inline-block; 
  box-sizing:border-box;
  width:25%;
  border:2px solid blue;
  height:100%;
}

<div class="ok">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

box-sizing 설정에도 불구하고: border-box, 내부의 인라인 블록 요소 용기가 딱 맞지 않아요. 이는 줄바꿈을 포함한 인라인 요소 사이의 기본 간격으로 인해 가로 공간이 추가로 발생하기 때문입니다.

이 문제를 해결하려면 HTML 소스에서 요소 사이의 공백을 제거하면 됩니다.

<div class="ok">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>

이렇게 하면 인라인 블록 요소 사이에 추가 간격이 없어 컨테이너 내에 적절하게 들어갈 수 있습니다.

위 내용은 `box-sizing: border-box`에도 불구하고 인라인 블록 요소가 컨테이너를 오버플로하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!