인라인 블록 요소를 사용할 때 자주 발생하는 문제는 레이아웃에서 눈에 띄는 간격(단어 간격과 유사)으로 변환되는 HTML의 공백이 있다는 것입니다.
해결책은 HTML 마크업 내 요소 간의 분리를 제거하는 것입니다. 이러한 수정 조치로 인해 마크업이 복잡해지고 편집 중에 문제가 발생할 수 있다는 점에 유의해야 합니다.
라이브 사이트와 내보낸 버전 간에 디자인 불일치가 발생하는 경우 시도해 볼 수 있는 몇 가지 기술이 있습니다.
- 축소된 코드 내보내기: Designer의 내보내기 모달 내에서 키보드 단축키 [ctrl+o]를 사용하여 고급 내보내기 설정에 액세스합니다.
- 축소된 코드 게시: 호스팅 탭 아래 사이트 설정에서 게시 옵션 섹션으로 이동하여 Beautify HTML을 선택 취소하세요.
- 수레 활용: 대신 float 속성을 사용해 보세요. 요소를 중앙에 배치하려면 디스플레이: 인라인 블록을 사용하여 Div 블록으로 묶습니다.
- 음수 여백 적용: 약간의 음수 왼쪽/오른쪽 여백을 추가하여 인라인 블록 요소로 인해 발생하는 추가 공간을 방지합니다.
- 글꼴 크기를 0으로 조정합니다. 상위 요소의 글꼴 크기를 0px로 설정하고 인라인 블록 요소의 글꼴 크기를 명시적으로 정의합니다.
Ewan Mak의 최신 게시물 (모두 보기)
- Workspace 스팟 및 멤버 포함 또는 제거 - 2024년 4월 15일
- 센터링 상자 요약 - 2024년 4월 15일
- 나중에 참조할 수 있도록 사이트 저장 - 2024년 4월 15일