내 인라인 블록 요소가 컨테이너를 오버플로하는 이유는 무엇이며 어떻게 해결할 수 있습니까?-CSS 튜토리얼-php.cn

내 인라인 블록 요소가 컨테이너를 오버플로하는 이유는 무엇이며 어떻게 해결할 수 있습니까?

Patricia Arquette

풀어 주다： 2024-12-14 06:37:18

원래의

417명이 탐색했습니다.

Why Do My Inline-Block Elements Overflow Their Container, and How Can I Fix It?

인라인 블록 박스 넘침 용기

제공된 코드에서는 인라인 블록 박스가 사용되었으며, 이는 내부에 깔끔하게 들어갈 것으로 예상됩니다. 컨테이너. 그런데 예상치 못한 공백으로 인해 상자가 오버플로됩니다.

이러한 동작은 인라인 요소의 고유한 간격과 인라인 블록 요소의 이러한 특성을 차용한 데서 비롯됩니다. 단락의 범위 또는 텍스트 요소 사이의 공백과 같은 인라인 블록 요소 사이의 공백 또는 줄 바꿈은 브라우저에서 인식되어 추가 너비로 렌더링됩니다.

해결책

이 문제를 해결하려면 HTML 코드 요소 사이의 공백을 제거하세요.

<div class="ok"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div></div>

로그인 후 복사

위 내용은 내 인라인 블록 요소가 컨테이너를 오버플로하는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!