가로스크롤 과 margin: 0 -1rem 질문 있습니다

Question

.card-list { display: flex; flex-wrap: wrap; margin: 0 -1rem; } .card-item { width: 50%; padding: 0 1rem; } 질문1. 맨 왼쪽 li의 padding-left는 없지만 맨 오른쪽 li의 padding-right은 왜 크기를 차지하고 있을까요?? margin: 0 -1rem으로 인해 맨 왼쪽, 맨 오른쪽의 padding-left, padding-right의 값이 없어진다고 생각했습니다.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 영준님!

질문 주신 내용은 CSS의 margin과 padding의 사용에 대한 것입니다. 먼저, margin: 0 -1rem;을 설정하면 .card-list의 양 끝부분에서 1rem씩의 공간을 가져와 가운데 여백을 넓혀주는 역할을 합니다. 이로 인해 양쪽의 padding이 없어진 것처럼 보일 수 있습니다. 하지만 실제로 각각의 .card-item은 padding: 0 1rem;을 가지고 있으므로, 맨 오른쪽 li의 padding-right가 여전히 공간을 차지하고 있는 것입니다.

간단히 말해, margin: 0 -1rem;은 부모 요소의 범위에서 적용되기 때문에 .card-list 자체의 외곽에 공간을 두지 않지만, 각 .card-item의 padding은 개별로 설정되어 있어 여전히 효과를 발휘하게 됩니다.

관련하여 추가 정보를 제공할 수 있는 유사한 게시물을 소개합니다:

이 두 게시물은 padding과 margin의 조정 및 활용 방법을 설명하고 있어 추가적인 이해를 도울 수 있을 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

가로스크롤 과 margin: 0 -1rem 질문 있습니다