Skip to main content

블럭 기본 여백 변경하기 (기본 여백 제거)

블럭의 여백은 상세 설정에서 수정할 수 있는데요.

다만, 상단과 하단 여백을 0으로 설정하여도 기본 여백으로 인해 28px의 여백이 더 남아있습니다.

dc6a6489640ca02b0d42dabeb8e46bb7.jpg

[닷홈빌더 블럭의 기본 여백]

이 부분은 편집기에서는 줄일 수 없고 별도의 css를 추가해 주어야 해요!

css를 추가하면 편집 화면에서는 이 여백 값을 줄일 수 없지만 실제 페이지에서 여백 값을 줄여서 보여줄 수 있어요!


기본여백제거01.jpg

[닷홈빌더 공통코드 입력 화면]

닷홈빌더 관리자에서 홈페이지 설정 > 공통코드 입력 페이지로 이동하여  아래에서 해당하는 코드를 추가한 뒤 저장해 주세요.


[모든 블럭의 여백을 조절하려는 경우]


<style>
.section .section-inner .h-con{padding-top: 상단여백크기px; padding-bottom: 하단여백크기px}
</style>



[특정 블럭의 여백을 조절하려는 경우]


<style>
#변경하려는블럭의ID .section-inner .h-con{padding-top: 상단여백크기px; padding-bottom: 하단여백크기px}
</style>
*블럭ID 확인하는 방법은 여기를 참고하세요.




[모바일 전용 블럭의 여백을 조절하려는 경우]


<style>
.msection .section-inner .h-con{padding-top: 상단여백크기px; padding-bottom: 하단여백크기px}
</style>






[변경된 모습]

58238e9ae2dd305d79c2ebc8c1883422_1.jpg

[닷홈빌더 블럭의 기본 여백이 제거된 화면]
여백을 0으로 설정하면 위와 같이 조절된답니다!
다만, 앞서 설명한 것과 같이 편집화면에서는 기본 여백이 그대로이고, 실제 페이지에서만 변경되는 것이니 이점 참고해 주세요~