여백1 display: inline-block 사용시 생기는 틈(공간) 없애는 방법 1. display: inline-block 사용하며 생기는 틈 display: inline-block를 사용해 블록 요소들을 가로 정렬할 수 있다. 이때 float와 다르게 아래와 같이 정렬된 요소 사이에 틈이 생기는 문제가 발생하는데 이에 대한 해결방법을 기록하려 한다. 2. 해결방법 [HTML] 1 2 3 4 [CSS] display: inline-block가 적용된 li의 부모 요소인 ul에 font-size: 0을 적용하면 자식 요소 li 사이에 있는 틈이 사라지게 된다. 만약 자식 요소에 텍스트가 있다면 자식 요소에 꼭 폰트 사이즈를 지정해줘야 텍스트가 정상 출력된다. 3. 결과 화면 2022. 8. 30. 이전 1 다음