CSS는 어떻게 이미지 사이의 공백을 제거할 수 있습니까?

CSS로 이미지 간 격차 해소

웹 개발 영역에서 이미지 사이에 공백이 있으면 미학적으로 방해가 될 수 있습니다. . 이를 해결하기 위해 줄 바꿈 방지 공백 사용, 전략적으로 HTML 주석 배치, 줄바꿈 도입 등 다양한 방법이 사용되었습니다. 하지만 CSS만으로 이러한 격차를 해소할 수 있는 더 우아하고 효율적인 방법이 있을까요?

디스플레이의 힘: 차단

답은 기본 디스플레이 속성을 이해하는 데 있습니다. HTML 이미지의 기본적으로 이미지는 인라인 요소입니다. 즉, 새 줄을 시작하지 않고 나란히 놓일 수 있습니다. 이 동작을 중단하고 공백을 제거하려면 표시 속성을 다음을 차단하도록 설정할 수 있습니다.

img {
  display: block;
}

구현 및 영향

이 CSS 규칙을 이미지에 적용하여 컨테이너의 경우 이미지는 블록 수준 요소로 작동합니다. 즉, 컨테이너의 전체 너비를 차지하고 세로로 쌓여서 사이의 수평 간격이 제거됩니다. 다음 코드는 이를 보여줍니다.

<code class="HTML"><div class="image-container">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
</div></code>

<code class="CSS">.image-container img {
  display: block;
}</code>

Voilà! 이미지 사이의 공간이 사라지고 이미지의 원활한 흐름이 남게 됩니다.

위 내용은 CSS는 어떻게 이미지 사이의 공백을 제거할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!