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

작성한 질문수

CSS Flex와 Grid 제대로 익히기

Flex UI #7 - 카드 리스트

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

작성

  .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의 값이 없어진다고 생각했습니다.

HTML/CSS flex

답변 1

인프런 AI 인턴

안녕하세요, 인프런 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의 조정 및 활용 방법을 설명하고 있어 추가적인 이해를 도울 수 있을 것입니다.

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

영준

질문자

"각 .card-item의 padding은 개별로 설정되어 있어 여전히 효과를 발휘하게 됩니다."
이렇게 말씀해주셨는데

여전히 효과를 발휘한다면 맨 왼쪽의 padding-left도 존재해야할거 같은데

맨 왼쪽의 padding-left는 없고 맨 오른쪽의 padding-right은 있어서 이 부분이 이해하기가 힘들어서 ㅠㅠ

그러면 맨 왼쪽의 padding-left도 있어야 하지 않나요??

영준

작성한 질문수

전체 Q&A

질문하기