인라인 요소 사이의 간격 제거

인라인 블록 요소 사이의 공백을 제거합니다.

인라인 블록 요소를 사용할 때 자주 발생하는 문제는 레이아웃에서 눈에 띄는 간격(단어 간격과 유사)으로 변환되는 HTML의 공백이 있다는 것입니다.

해결책은 HTML 마크업 내 요소 간의 분리를 제거하는 것입니다. 이러한 수정 조치로 인해 마크업이 복잡해지고 편집 중에 문제가 발생할 수 있다는 점에 유의해야 합니다.

라이브 사이트와 내보낸 버전 간에 디자인 불일치가 발생하는 경우 시도해 볼 수 있는 몇 가지 기술이 있습니다.

  • 축소된 코드 내보내기: Designer의 내보내기 모달 내에서 키보드 단축키 [ctrl+o]를 사용하여 고급 내보내기 설정에 액세스합니다.
  • 축소된 코드 게시: 호스팅 탭 아래 사이트 설정에서 게시 옵션 섹션으로 이동하여 Beautify HTML을 선택 취소하세요.
  • 수레 활용: 대신 float 속성을 사용해 보세요. 요소를 중앙에 배치하려면 디스플레이: 인라인 블록을 사용하여 Div 블록으로 묶습니다.
  • 음수 여백 적용: 약간의 음수 왼쪽/오른쪽 여백을 추가하여 인라인 블록 요소로 인해 발생하는 추가 공간을 방지합니다.
  • 글꼴 크기를 0으로 조정합니다. 상위 요소의 글꼴 크기를 0px로 설정하고 인라인 블록 요소의 글꼴 크기를 명시적으로 정의합니다.
이완 막
Ewan Mak의 최신 게시물 (모두 보기)