내 인라인 블록 요소가 나란히 정렬되지 않는 이유는 무엇입니까?

나란히 정렬되지 않는 인라인 블록 요소

display: inline-block이 있는 두 요소에 50% 너비가 할당되는 시나리오를 생각해 보세요. 나란히 맞을 것으로 예상할 수도 있지만 대신 사용 가능한 공간을 초과합니다. 이 문제를 해결하려면:

문제의 원인

인라인 블록 요소는 시각적으로 제거되는 것처럼 보임에도 불구하고 요소 사이의 여백을 상속합니다. 일반적으로 약 4px인 이 추가 공백으로 인해 두 요소의 전체 너비가 100%를 초과하게 됩니다.

대체 솔루션

• 요소 너비 줄이기: 한 요소의 너비를 49%로 설정하면 오버플로 문제가 해결되지만 바람직하지 않은 문제가 발생합니다. gap.
• 플로팅 요소: 두 요소를 플로팅하면 각각 50% 너비를 유지하면서 올바르게 정렬됩니다.

최신 브라우저(2021년 이상)를 위한 이상적인 솔루션 )

Flexbox 또는 CSS 그리드 레이아웃은 인라인 블록의 대안으로 권장됩니다. 고유한 공백 문제 없이 간격과 레이아웃을 더 잘 제어할 수 있습니다.

인라인 블록 및 공백

공백 문제를 설명하려면 다음 코드를 고려하세요.

body {
  margin: 0; /* remove default body margin */
}

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

.left {
  background-color: aqua;
}

.right {
  background-color: gold;
}

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

요소들이 인접해 있는 것처럼 보이지만 실제로는 그 사이에 좁은 여백이 있습니다.

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