HTML 요소 사이의 공백을 효과적으로 제거하려면 어떻게 해야 합니까?

HTML에서 공백 무시: 'white-space-collapse' 속성

HTML과 CSS가 널리 보급되어 있음에도 불구하고 공백을 무시하도록 브라우저에 지시하는 직접적인 방법은 아닙니다. 이로 인해 이미지 등의 요소가 원치 않는 공백으로 인해 실수로 분리되는 경우 답답한 상황이 발생할 수 있습니다.

'공백 축소' 속성

보편적으로는 없지만 지원되는 솔루션에서는 CSS 속성 'white-space-collapse'가 유망한 접근 방식을 제공합니다. 이미지의 상위 요소에서 이 속성을 'discard'로 설정하면 이미지 사이의 공백을 효과적으로 제거할 수 있습니다.

#parent_of_imgs { white-space-collapse: discard; }

단점

안타깝게도 이 이 솔루션은 심각한 단점으로 인해 방해를 받습니다. 현재 알려진 바에 따르면 어떤 주요 브라우저도 'white-space-collapse' 속성을 구현하지 않았습니다. 즉, 잠재적인 효율성에도 불구하고 널리 사용하기에는 여전히 실용적이지 않습니다.

대체 솔루션

대안으로 이미지 사이에 HTML 주석을 추가할 수 있습니다. . 이상적이지는 않지만 이 기술은 브라우저가 눈에 보이는 공백을 렌더링하는 것을 방지할 수 있습니다.

<p>
  <!--
    --> <img src="." alt="" /> <!--
    --> <img src="." alt="" /> <!--
    --> <img src="." alt="" /> <!--
    --> <img src="." alt="" /> <!--
  -->
</p>

위 내용은 HTML 요소 사이의 공백을 효과적으로 제거하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!