본문 바로가기

p 태그에 마진(margin) 여백이 적용되지 않는 경우

2019.10.20 댓글 0

인용구(Blockquote) 내의 <p> 태그에 여백(margin)이 적용되지 않는 문제가 종종 발생합니다. 예를 들어, 워드프레스 Newspaper 테마의 인용구(blockquote)에서 <p> 태그에 margin-top이나 margin-bottom을 적용해보아도 먹히지 않았습니다.

이 문제에 대하여 검색해보니 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으로 변경해보시기 바랍니다.

※일부 글에 제휴 링크가 포함될 수 있습니다.

댓글0