인라인 블록 요소가 100% 너비로 포장되지만 99%로는 포장되지 않는 이유는 무엇입니까?

인라인 블록 중첩: 인라인 블록 요소 표시 딜레마

HTML에서 다음을 사용하여 이중 열 레이아웃을 달성하려는 경우 각 열의 너비가 50%와 같으므로 'display: inline-block' 속성을 사용하는 것이 기존 float 메서드에 대한 간단한 대안처럼 보입니다. 그러나 특정 조건에서는 이 접근 방식이 예상치 못한 결과를 초래할 수 있습니다.

구체적으로 인라인 블록이 전체 너비의 99%를 소비하면 가로로 나란히 표시되어 예상대로 동작합니다. 그러나 전체 너비가 100%에 도달하면 두 번째 인라인 블록이 예기치 않게 다음 줄로 넘어갑니다.

Reason Behind the Discrepancy

이 특이한 동작은 다음과 같은 사실에서 비롯됩니다. 인라인 블록은 HTML에서 공백 속성을 상속합니다. 기본적으로 공백 문자는 요소 사이에 존재하며 인라인 블록 요소는 너비 계산에서 이 공백을 고려합니다. 결과적으로 공백을 포함하여 전체 너비가 정확히 100%인 경우 두 번째 인라인 블록이 실제 콘텐츠 너비를 초과하여 다음 줄로 줄 바꿈됩니다.

해결 방법: 흰색 제거 -space

이 문제를 해결하려면 인라인 블록 요소 사이의 공백을 제거해야 합니다. 이렇게 하면 너비 속성의 계산이 더욱 정확해지며 두 번째 인라인 블록이 콘텐츠 너비를 넘어서 확장되는 것을 방지할 수 있습니다.

예제 코드

해결책 설명 , 다음 HTML 코드를 고려하십시오.

<div>

div 사이의 공백을 제거하여 두 인라인의 원하는 동작을 달성합니다. 전체 너비가 100%인 경우에도 각 블록이 50% 너비 내에서 나란히 표시됩니다.

결론

공백의 영향 이해 인라인 블록 요소에 대한 것은 CSS 레이아웃에서 매우 중요합니다. 이러한 요소 사이의 불필요한 공백을 제거함으로써 개발자는 특히 두 열에 대해 동일한 너비를 갖는 이중 열 레이아웃을 생성해야 하는 경우 인라인 블록이 예상대로 작동하도록 보장할 수 있습니다.

위 내용은 인라인 블록 요소가 100% 너비로 포장되지만 99%로는 포장되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!