CSS를 사용하여 이미지 사이의 공간 제거

your programing

lovepro 2020. 10. 13. 08:20

이 질문에 이미 답변이 있습니다.

주어진:

<img src="..."/>
<img src="..."/>

결과는 그 사이에 하나의 공간이있는 두 개의 이미지입니다. 정상적인 동작은 공백, 줄 바꿈 및 탭을 단일 공백으로 표시하는 것 같습니다. 다음을 수행 할 수 있습니다.

<img src="..."/><img src="..."/>

또는

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

또는

<img src="..."/
><img src="..."/>

또는 다른 수의 해킹. CSS로 공백을 제거하는 방법이 있습니까? 예 :

<div class="nospace">
    <img src="..."/>
    <img src="..."/>
</div>

display: blockCSS에서 만드십시오 .

거의 모든 곳에서 호환되는 쉬운 방법은 font-size: 0스타일을 지정해야하는 하위 텍스트 노드가없는 경우 컨테이너 에 설정 하는 것입니다 (필요한 경우이를 재정의하는 것은 간단하지만).

.nospace {
   font-size: 0;
}

기본값 display: inline에서 block또는 로 변경할 수도 있습니다 inline-block. 작동 하려면 <= IE7 (및 고대 Firefox)에 필요한 해결 방법 을 사용해야합니다 inline-block.

내가 찾은 가장 좋은 해결책은 부모 div에 포함하고 해당 div에 글꼴 크기를 0으로 지정하는 것입니다.

나는 이것을 선호한다

img { float: left; }

이미지 사이의 공간을 제거하려면

나를 위해 일한 유일한 옵션은

font-size:0;

나는 또한 사용 overflow하고 있었고 white-space: nowrap; float: left;엉망이 된 것 같습니다.

lovepro