워드프레스 버튼, 이미지 아래 고정 여백 넣는 방법 (CSS 코드)

워드프레스 본문에 삽입된 버튼, 이미지와 이어지는 텍스트가 너무 붙어서 보이는 경우가 많습니다.

여백도구가 있지만 잘 적용되는지 알 수 없고, 이미지와 같이 자주 사용되는 것에 일일이 여백을 추가하는 것은 매우 번거롭습니다.

 

워드프레스 CSS  코드 추가 방법

CSS 코드는 워드프레스 관리자 페이지 접속 후 모양 → 사용자 정의하기 → 추가 CSS에서 입력할 수 있습니다.

 

워드프레스 버튼 하단 여백 추가

모든 버튼 밑에 20px의 여백을 주는 CSS 코드입니다.

.wp-block-button {     
    margin-bottom: 20px  /* 하단 여백 20px 추가 */
			!important;   /* 다른 스타일보다 우선 적용 */
}

 

워드프레스 이미지 하단 여백 추가

본문에 추가한 이미지를 가운데 정렬 시키고, 밑에 100px의 여백을 주는 CSS 코드입니다.

.wp-block-image {
    text-align: center;      /* 이미지 가운데 정렬 */
    margin-bottom: 100px;    /* 하단 여백 100px 추가 */
}

 margin-bottom을 margin-top으로 변경해서 이미지 위에 여백을 줄 수도, margin-left, margin-right를 적용해서 좌우에 여백을 줄 수도 있습니다.

알아두면 좋은 워드프레스 CSS목록

블록 클래스	내용
.wp-block-image	이미지
.wp-block-button	버튼
.wp-block-heading	제목 (예: <h2>, <h3> 등)
.wp-block-table	표
.wp-block-audio	오디오
.wp-block-cover	커버 이미지
.wp-block-embed	임베드
.wp-block-file	파일 다운로드 링크
.wp-block-gallery	갤러리
.wp-block-group	그룹
.wp-block-list	목록
.wp-block-media-text	미디어와 텍스트를 함께 표시
.wp-block-paragraph	단락
.wp-block-quote	인용문
.wp-block-separator	구분선
.wp-block-shortcode	쇼트코드
.wp-block-video	비디오
.wp-block-columns	다중 열 레이아웃에 사용되는
.wp-block-code	코드
.wp-block-preformatted	서식이 지정된 텍스트
.wp-block-pullquote	pullquote 스타일의 인용문
.wp-block-rss	RSS 피드
.wp-block-verse	시 또는 구절 스타일 텍스트

위 블록 클래스를 이용하여 원하는 스타일로 워드프레스 페이지 및 본문을 꾸밀 수 있습니다.