두 개의 50% 너비 인라인 블록 요소가 나란히 맞지 않는 이유는 무엇입니까?

폭이 50%인 두 개의 인라인 블록 요소가 연속으로 나란히 맞지 않는 경우: 이유는 무엇입니까?

인라인 블록을 활용하는 경우 요소 사이의 공백(폭 약 4px)에 본질적인 문제가 있습니다. 즉, 너비가 각각 50%인 두 div와 이 공백이 너비의 100%를 초과하여 의도한 단일 행에서 벗어나게 된다는 의미입니다.

예:

body {
  margin: 0;
}

div {
  display: inline-block;
  width: 50%;
}

.left {
  background-color: aqua;
}

.right {
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

공백이 있는 이유 문제:

• 여백 축소: 인라인 요소의 여백은 병합되거나 축소되지 않습니다. 대신 요소 사이에 작은 공간을 만듭니다.
• 인라인 요소 사이의 간격: 패딩이나 테두리가 정의되지 않은 경우 브라우저는 일반적으로 인라인 요소 사이에 4px 간격을 추가합니다.

대체 솔루션:

하나를 설정하는 동안 div를 49% 너비로 설정하면 간격 문제를 해결할 수 있지만 이상적인 방법은 아닙니다. 대안은 다음과 같습니다:

• Float: Floating 요소는 인라인 간격 문제를 제거하지만 수직 정렬에 영향을 줍니다.
• Flexbox: Flexbox를 사용하면 허용됩니다. 보다 정확한 레이아웃 제어를 위해 공백을 방지합니다. 문제.
• CSS 그리드: 최신 CSS 그리드 레이아웃은 요소 위치 제어를 위한 그리드 기반 접근 방식을 제공하여 인라인 블록 요소의 필요성과 간격 문제를 제거합니다.

위 내용은 두 개의 50% 너비 인라인 블록 요소가 나란히 맞지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!