list 스타일링할 때 margin과 padding의 차이점에 대한 질문입니다.

조회수 1713회

강의 2-8의 6분 10초경에 리스트요소를 css로 스타일링하시며 margin과 padding을 번갈아가며 비교해주셨습니다. 그런데 궁금한 점은 둘다 위아래로 10px의 값을 주었지만 실제 스타일 결과는 달랐다는 것입니다.

li {
    padding: 10px 0;
}

이렇게 먹였을때는 각 리스트 간의 간격이 제대로 10+10으로 20px인데

li {
    margin: 10px 0;
}

이렇게 margin으로 했을 때는 각 리스트 간의 간격이 20px이 아니라 10px로 겹쳐져서 더 좁게 나왔습니다.

둘다 위아래로 10px을 주었기 때문에 리스트 간 간격이 20px이 나와야 할 것 같은데 왜 margin은 10px이 나왔나요? 궁금합니다.

1 답변

  • 좋아요

    3

    싫어요
    채택 취소하기

    안녕하세요 야무입니다. :-D

    좋은 질문입니다. 매우 중요한 내용 이거든요!

    해당 현상을 마진 콜렙싱(Margin Collapsing) 이라고 부릅니다. 즉, '마진 공간이 접히는 현상'을 말하는 거죠. 이러한 현상은 상/하 방향에서만 발생합니다. 좌/우 방향에서는 이와 같은 현상을 보이지 않습니다. 그리고 마진에서 만 발생합니다. 패딩(Padding)은 이와 같은 현상이 발생하지 않습니다.

    그림으로 이해해 볼까요? :)

    margin collapsing

    좌측 그림은 사용자가 기대한 CSS 마진 설정입니다.

    • 위 박스: margin-bottom: 30px;
    • 아래 박스: margin-top: 20px;

    50px 만큼의 공간을 예상했으나, 실제 브라우저에서 처리된 화면은 우측 그림과 같이 공간이 30px 만큼 생깁니다. 이유는 30 > 20 보다 크기 때문에 30만큼 생긴거죠. 만약 아래 박스의 마진 설정이 margin-top: 40px 이라면 공간은 40이 됩니다. (40 > 30)

    참고로 마진 콜렙싱 현상은 블록 요소 사이에만 발생합니다. 이러한 현상으로 상/하 마진을 한 방향으로만 주는 것을 권장합니다.

    • 친절한 답변 감사합니다. 이 내용은 그냥 암기하듯 알고 있어야 하는 내용인거겠죠? 왜 or 무엇을 위해 이런 현상을 만들어냈는지 궁금하기도 하네요. girin-dev 2018.3.26 14:57
    • 웹 환경이 아닌, 소프트웨어 Microsoft Word 또한 유사한 동작을 보입니다. 제목 뒤에 12pt의 마진 여백이 있고 단락 앞에 6pt의 여백이있는 경우, 제목 뒤에 단락이 오는 경우 사이 공간은 18pt가 아닌 12pt로 설정됩니다. 아마도 화면에 레이아웃을 구성하는 사용자 경험이 과거로부터 현재까지 상/하 마진의 경우는 영역이 접히게 구성한 것이 아닌가 하네요. 한편으로는 2개의 박스에 마진을 설정할 때 "아래 박스와 20px만큼 공간을 주고 싶어" 하면서 마진을 설정하지, "아래 박스와 현재 박스의 공간 합을 계산해서 50px로 설정 해야자" 하면서 디자인(설계) 하지 않는 인간의 습성이 반영된 결과가 아닌가 합니다. :-) 야무 2018.3.26 15:14

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.