인용구(Blockquote) 내의 <p> 태그에 여백(margin)이 적용되지 않는 문제가 종종 발생합니다. 예를 들어, 워드프레스 Newspaper 테마의 인용구(blockquote)에서 <p> 태그에 margin-top이나 margin-bottom을 적용해보아도 먹히지 않았습니다.
p 태그에 마진(margin) 여백이 적용되지 않는 경우
이 문제에 대하여 검색해보니 stackoverflow의 Margin-top not working for <p> and <a> tag? (<p> 태그와 <a> 태그에서 Margin-top이 작동하지 않는 문제) 글에서 이 문제를 다루고 있습니다. Margin Collapsing이라는 문제와 관련이 있는 것 같습니다. Margin Collapsing은 "여백 상쇄", "마진 겹침" 등으로 번역되어 있네요.
Margin Collapsing에 대한 자세한 정보는 Mozilla 개발자 문서를 참고해보세요.
이 문제가 발생하는 경우 1) p 태그에 padding을 대신 사용하거나, 2) display 속성을 inline에서 inline-block이나 block으로 변경하면 문제가 해결될 수 있습니다.
That's why the margin doesn't work on the p tag. To make it work here an option is to use padding-top on the p tag.
You may need to change its display property to inline-block or block.
저는 이 문제가 발생하여 display 속성을 inline-block으로 변경하여 해결했습니다. display 속성을 변경하면 레이아웃이 깨질 수 있습니다. 그러면 CSS를 사용하여 조정해주는 작업이 필요할 수 있습니다.
p 태그에 margin이 적용되지 않으면 padding을 적용해보고, 그래도 안 되면 display 속성을 inline에서 inline-block이나 block으로 변경해보시기 바랍니다.
참고
https://avada.tistory.com/1777
CSS로 텍스트의 절반 높이만 형광펜으로 표시하는 방법
요즘 블로그를 구경하다 보면 텍스트에 형광펜 효과를 주는 경우를 종종 봅니다. 보통은 텍스트의 전체 높이에 형광펜 효과를 주는 배경색을 이용하거나, 밑줄 형태로 형광펜 효과를 주는 경우
avada.tistory.com
https://avada.tistory.com/1752
CSS로 텍스트 라인 수 제한하는 방법
상황에 따라 텍스트 라인 수를 줄이고 싶은 경우가 있습니다. CSS로 텍스트 라인 수 제한하는 방법을 사용하면 비록 제약이 있지만 제일 간편한 것 같습니다. 목차 CSS로 텍스트 라인 수 제한하기
avada.tistory.com