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

Question

인라인 블록 사이에 이상한 간격이 있습니다. AJAX 호출로 더 많은 콘텐츠를 로드하고 이 작은 간격이 사라질 때까지 계속 사용할 수 있습니다. 나는 여기에 뭔가 빠졌다는 것을 알고 있습니다.

div {
    너비: 100px;
    높이: 자동;
    테두리: 1px 단색 빨간색;
    개요: 1px 단색 파란색;
    여백: 0;
    패딩: 0;
    디스플레이: 인라인 블록;
}

http://jsfiddle.net/AWMMT/

인라인 블록 사이의 간격을 일관되게 유지하려면 어떻게 해야 합니까?

Answer 1

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

으아악

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

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

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

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

으아악

Answer 2

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

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