인라인 블록: 공간적 속성 탐색

Question

인라인 블록 사이에 이상한 간격이 있습니다. AJAX 호출로 더 많은 콘텐츠를 로드하고 이 작은 간격이 사라질 때까지 계속 사용할 수 있습니다. 나는 여기에 뭔가 빠졌다는 것을 알고 있습니다. div{width:100px;height:auto;border:1pxsolidred;outline:1pxsolidblue;margin:0;padding:0;display:inline-block;}http://jsfiddle.net/AWMMT/인라인 만드는 방법

P粉349222772 · Answer

http://jsfiddle.net/AWMMT/1/

으아악

공백은 표시할 때 브라우저가 "공백"으로 변환하는 줄 바꿈입니다.

또는 CSS를 사용하여 약간의 조정을 시도해 볼 수도 있습니다.

Flexbox는 하위 요소 사이의 공백을 편리하게 무시하며 연속적인 인라인 블록 요소처럼 표시됩니다.

http://jsfiddle.net/AWMMT/470/

으아악

P粉731861241 · Answer

공백은 HTML에 있습니다. 몇 가지 가능한 해결책이 있습니다. 최고에서 최악까지:

HTML에서 실제 공백을 제거합니다. (이상적으로는 파일을 제공할 때 서버가 이 작업을 수행하거나 최소한 입력 템플릿에서 적절하게 공백을 추가할 수 있습니다.) http://jsfiddle.net/AWMMT/2/
float: left而不是display: inline-block를 사용하세요. 하지만 키에 나쁜 영향을 미칩니다: http://jsfiddle.net/AWMMT/3/
컨테이너의 font-size设置为0，并为内部元素设置适当的font-size 배치: http://jsfiddle.net/AWMMT/4/ - 이것은 매우 간단하지만 내부 요소에 대한 상대적 글꼴 크기 규칙(백분율, em)을 활용할 수는 없습니다.