50% 너비의 인라인 블록 요소가 다음 줄로 넘어가는 이유는 무엇입니까?

인라인 블록 요소 두 번째 줄로 나누기: 너비와 공백 이해

폭이 50%인 두 개의 인라인 블록 요소를 만들려고 하면 두 번째 요소가 다음 줄로 넘어가는 문제가 발생하면 실망스러울 수 있습니다. 그러나 이 동작은 inline-block 속성의 결과가 아니라 공백 관리의 결과입니다.

display:inline-block 속성을 사용하면 요소가 인라인 요소처럼 동작할 수 있습니다(동일한 요소에 표시됨). 선), 너비와 높이도 정의되어 있습니다. 그러나 인라인 요소와 달리 인라인 블록 요소는 너비 계산 시 공백 문자를 고려합니다.

50%, 49% 등 총 너비가 99%인 두 개의 인라인 블록 요소의 경우 , 너비 측정에는 그 사이의 공백이 포함됩니다. 결과적으로 요소들은 지정된 너비에 맞춰 나란히 표시됩니다.

한편, 요소의 전체 너비가 100%인 경우 공백도 공백에 포함됩니다. 계산. 두 번째 요소를 수용할 남은 공간이 없기 때문에 강제로 다음 줄로 줄 바꿈됩니다.

이 문제를 해결하고 두 번째 요소가 깨지는 것을 방지하려면 인라인 블록 요소 사이에 공백이 있어야 합니다. 제거할 수 있습니다. 공백을 제거하면 그에 따라 너비 계산이 조정되고 두 요소 모두 같은 줄에 편안하게 들어갈 수 있습니다.

이 조정은 CSS를 사용하여 상위 요소의 공백 속성을 다음으로 설정하여 수행할 수 있습니다. 아래 예에서 볼 수 있듯이 nowrap 또는 없음:

#parent-container {
  white-space: nowrap;
}

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