워드프레스 br 태그 공백 적용하기

워드프레스 사이트에 댓글을 달고 난 후에 살펴보니 아래 그림과 같이 문단 사이 간격이 좁아서 보기가 좋지 않았습니다. 

살펴보니 댓글을 달 때 엔터를 입력했지만 <br> 태그가 삽입되어 나타나는 현상이었습니다.

워드프레스 br 태그 공백 적용하기

제가 운영하는 워드프레스 사이트에서는 개별 포스트에서 직접 댓글을 달 때 엔터를 치면 문단 태그(<p>)가 입력되었지만, 관리자 페이지 내에서 댓글에 답변을 달 때 엔터를 치면 <br> 태그가 삽입되었습니다.

br 태그에 공백(여백)을 적용하려는 경우 다음과 같은 CSS 코드를 사용할 수 있습니다.

br {
    display: block;
    content: '';
    margin-bottom: 10px; 
}

위의 코드를 추가하면 사이트 전체의 br 태그에 스타일이 적용되므로 예기치 않은 결과를 초래할 수 있으므로 주의해야 합니다. 댓글 콘텐츠에만 적용되도록 하려면 GeneratePress 테마에서는 다음과 같은 코드를 추가할 수 있습니다.

.comment-content br {
    display: block;
    content: '';
    margin-bottom: 10px; 
}

여백 크기는 적절히 변경하여 마음에 드는 간격을 찾으시기 바랍니다. CSS 선택자는 테마에 따라 조금씩 다를 수 있습니다.

상기 코드를 외모 » 사용자 정의하기 » 추가 CSS에 추가하거나 차일드 테마의 스타일시트 파일에 추가하면 됩니다.

위의 코드를 추가하니 br 태그에 하단 여백(margin-bottom)이 추가되어 처음보다는 조금 보기가 좋아졌습니다.

참고

https://avada.tistory.com/2897

엘리멘터 무료 버전 vs. 프로 버전 비교

https://avada.tistory.com/2335

워드프레스 GeneratePress 테마 라이선스 (+요금제)

https://avada.tistory.com/3046

해외웹호스팅: 클라우드웨이즈 vs. 블루호스트 비교 (Cloudways vs. Bluehost)