>  Q&A  >  본문

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

<p>인라인 블록 사이에 이상한 간격이 있습니다. AJAX 호출로 더 많은 콘텐츠를 로드하고 이 작은 간격이 사라질 때까지 계속 사용할 수 있습니다. 나는 여기에 뭔가 빠졌다는 것을 알고 있습니다. </p> <pre class="brush:php;toolbar:false;">div { 너비: 100px; 높이: 자동; 테두리: 1px 단색 빨간색; 개요: 1px 단색 파란색; 여백: 0; 패딩: 0; 디스플레이: 인라인 블록; }</pre> <p>http://jsfiddle.net/AWMMT/</p> <p>인라인 블록 사이의 간격을 일관되게 유지하려면 어떻게 해야 합니까? </p>
P粉360266095P粉360266095444일 전560

모든 응답(2)나는 대답할 것이다

  • P粉349222772

    P粉3492227722023-08-23 11:30:02

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

    으아악

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

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

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

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

    으아악

    회신하다
    0
  • P粉731861241

    P粉7318612412023-08-23 00:09:15

    공백은 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)을 활용할 수는 없습니다.

    회신하다
    0
  • 취소회신하다