두 개의 100% 너비 인라인 블록 요소가 겹치는 이유는 무엇입니까?

100% 너비를 사용할 때 두 개의 인라인 블록 요소가 겹침

같은 너비의 두 개의 나란히 열을 생성하려는 시도 , 요소에 display: inline-block을 사용할 수 있습니다. 그러나 이러한 요소가 상위 요소 너비의 100%를 누적적으로 차지하면 예상치 못한 문제가 발생합니다. 두 번째 열이 새 줄로 줄바꿈됩니다.

왜 이런 일이 발생합니까?

이 동작의 이유는 인라인 블록 요소가 공백을 처리하는 방식에 있습니다. 기본적으로 인라인 블록 요소는 HTML 코드의 공백 문자를 따릅니다. 줄 바꿈이나 탭과 같이 요소 사이에 상당한 공백이 있는 경우 요소는 그에 따라 구분됩니다.

해결책: 공백 제거

방지하려면 래핑의 두 번째 열에서는 인라인 블록 요소 사이의 공백을 제거하기만 하면 됩니다. 이는 다음과 같은 HTML 코드 한 줄을 사용하여 달성할 수 있습니다.

<div>

공백이 제거되면 인라인 블록 요소는 선언된 너비를 준수하고 나란히 유지됩니다. 첫 번째 줄에서 원하는 동작을 수행합니다.

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