제너레이트프레스 버튼 하단 여백 조절 간격 띄우기 방법입니다.
워드프레스 테마로 제너레이트프레스(GeneratePress) 테마를 사용 중입니다. 워드프레스 쿠텐베르크 편집기에서 기본 제공되는 버튼을 입력하는 경우 아래와 같이 여백이 마음에 들지 않았습니다.
일단은 편집기에서는 문제가 없었지만, 글을 발행하고 보면 너무 붙어있는 것이 보입니다. 그래서 CSS 추가로 여백을 띄울 생각입니다.
버튼과 본문 간격이 가깝다
편집기에서 버튼을 입력하면 아래 이미지 처럼 버튼과 본문 내용 간격이 너무 붙어있습니다.
모양이 중요하지 않지만 그래도 중요한 것 아니겠습니까? 그래서 띄우는 방법을 검색하여 찾았습니다.
CSS 추가로 여백 조절하기
공백 조절 방법은 아래 순서대로 진행합니다. 코드를 복사 붙여넣기 하면 되는 간단한 과정입니다.
1. 워드프레스 외모 – 사용자 정의하기로 들어갑니다.
2.왼쪽 메뉴에서 맨 아래에 있는 추가 CSS 클릭
3.버튼 하단 여백 조절을 붙여넣기하고 저장합니다.
📌 추가 CSS 코드
/* 버튼 하단 여백 조절*/
body .is-layout-flex {padding-bottom: 20px !important;}
4. 여백 조절 완료입니다.
첫번째 이미지보다 여백이 벌어진 것을 확인할 수 있습니다. 여백을 더 주거나 덜 주고 싶으면 20px 부분의 숫자를 조절하시면 됩니다.
다하고 나니 이미지와 붙어있는 버튼도 보기가 싫습니다. 이미지 정렬도 가운데로 하고 싶습니다.
변경하는 방법은 위와 같이 css를 추가하여 변경해야겠습니다.