워드프레스 이미지 위 아래 여백 조정하는 방법

워드프레스 이미지 첨부해서 글을 작성해보셨나요?

글을 작성할 때에는 블록 단위로 보여서 글과 이미지 여백이 충분한 것 처럼 보입니다. 그러나 글을 발행하고 나면 이미지 아래 여백이 전혀 없는 것을 확인할 수 있습니다.

아래 워드프레스 이미지 위 아래 여백 조정 전과 조정 후 모습을 살펴보겠습니다.

이미지 여백을 조정하고 나니 확실히 경계가 뚜렷하고 글의 가독성이 한결 나아진 것 같습니다. 여러분도 그렇게 느껴지시나요?

이미지 여백 이외에도 글 가독성을 높일 수 있는 방법에는 이미지 테두리 혹은 그림자 효과를 주는 방법도 있습니다. 해당 내용이 궁금하신 분들은 아래 글도 한번 읽어보세요.

✅ 워드프레스 이미지 테두리에 그림자 효과 적용하는 방법

그럼 지금부터 이미지 여백을 조정하는 방법에 대해서 알아보도록 하겠습니다.

이미지 위 아래 여백 조정하는 방법

1) 메뉴에서 외모 > 추가 CSS 를 누릅니다.

2) 아래 CSS 코드를 복사 붙여넣기 하고 발행함 버튼을 클릭합니다.

/* 이미지 위 아래 여백 */

.wp-block-image img {
margin-top: -0.8em ;  
margin-bottom: 2em ;
}
  • margin-top : 이미지 위 여백
  • margin-bottom : 이미지 아래 여백

CSS 코드 안의 숫자를 수정하여 이미지 위 아래 여백을 조정할 수 있습니다. 기본적으로 이미지 윗 부분은 여백이 어느정도 있기에 그 간격을 줄이기 위해서 마이너스(-) 로 조정하였습니다.

이렇게 (-)마이너스 부터 (+)플러스 까지 숫자를 조금씩 바꾸면서 여백을 조정하면 됩니다.

글 마치며…

오늘은 본문 안에 이미지 위 아래 여백을 조정하는 방법에 대해서 알아봤습니다. 저처럼 CSS 언어를 잘 몰라도 조금만 찾아보면 누구나 원하는대로 사이트 디자인을 변경할 수 있습니다.

앞으로도 비타민노트에서 적용한 내용을 하나씩 정리해서 공유드리겠습니다. 저처럼 워드프레스를 처음하시는 분들께 도움이 되길 바랍니다.

답글 남기기