inline, line-block 요소 간격 제거

인라인, 인라인-블럭 요소들을 아래와 같이 작성 하였을 때 요소 사이에 간격이 발생 하게 됩니다 .

기본

이러한 간격들을 없애기 위한 다양한 방법들이 있습니다.

1. 인라인 요소들 붙여쓰기

css 수정 없이 간단한 방법으로 간격을 없앨 수 있지만 가독성이 좋지 않습니다. 

2.부모 요소에 font-size:0

인라인 요소를 감싸고 있는 부모 요소에 font-size:0 을 적용 한 후,

인라인 요소에 기존의 font-size 값을 입력하는 방법입니다.

3. 주석처리 방법

html의 주석을 활용해서 간격을 제거 할 수 있다고 합니다.

4. 닫힘 태그 내리는 방법

닫힘 태그를 아래로 내려 간격을 없앨 수 있습니다.

5. 마진값으로 없애기

마진값을 통해 간격을 없앨 수 있지만 브라우저 마다 마진 값이 달라 추천 하지 않은 방법 입니다.

6. float 속성

인라인 요소에 float 값을 부여해 간격을 제거 할 수 있지만 vertical-align 속성을 사용 할 수 없습니다.