CSS

마진겹침 현상

마진겹침(margin-collapsing) 현상은 상하 마진값이 어떤 상황에서 사라지는 현상을 의미합니다. 이 현상은 초심자에게는 중요한 내용이 아니기 때문에 지나치시길 바랍니다. 하지만 이것을 이해하지 못하면 실무를 할 때 이해할 수 없는 CSS의 동작으로 인해서 깊은 화남이 생길 수 있으니까 언젠가는 보시는게 좋겠습니다. 

마진겹침 현상 1

 예제 - margin-collapsing-1.html

<!DOCTYPE html>
<html>
  <head>
      <style>
          h1{
              border:1px solid red;
              margin:100px;
          }
      </style>
  </head>
  <body>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  </body>
</html>

마진겹침 현상 2

예제 - margin-collapsing-2.html

<!doctype html>
<html>
<head>
    <style>
        #parent{
/*            border:1px solid tomato;*/
            margin-top:100px;
        }
        #child{
            background-color: powderblue;
            margin-top:50px;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="child">
            Hello world
        </div>
    </div>
</body>
</html>

 마진겸침 현상 3

예제 - magin-collapsing-3.html 

<!doctype html>
<html>
<head>
    <style>
        #empty{
            margin-top:50px;
            margin-bottom: 100px;
/*            border:1px solid tomato;*/
        }
        #normal{
            background-color: powderblue;
            margin-top:100px;
        }
    </style>
</head>
<body>
    <div id="empty"></div>
    <div id="normal">normal</div>
</body>
</html>

댓글

댓글 본문
  1. datsciseol
    20210116
  2. malbong
    1. 위아래(형제) 엘리먼트 중에 margin값이 큰 값을 취함

    2. 부모자식 관계중에

    - 부모 엘리먼트의 시각적인 요소가 있다면 마진겹침은 일어나지 않음

    - 부모 엘리먼트의 시각적인 요소가 없다면 마진겹침은 부모자식 중 margin 값이 큰 값을 취함

    3. 어떤 엘리먼트에 시각적인 요소가 없고 margin-top, margin-bottom이 서로 다르면 (cf. top-bottom / left&right 치환해서 봐도 됨)
    - 엘리먼트 혼자서 마진이 겹친다고 생각하면 됨

    - 이 엘리먼트 혼자서 마진겹침은 top과 bottom중 margin 값이 큰 값을 취함

    - 엘리먼트가 시각적인 요소가 있다면 위의 1과 똑같은 마진겹침
  3. 주니어개발자
    베리 나이스 땡큐
    대화보기
    • 201214 마진겹침현상 3은..진짜 어렵네요. 나중에 다시 보겠습니다
    • Seunghyuk Rodrigo Kim
      감사합니다.
    • 만듀
      20201109
    • 켄드릭
      2020년 11월 04일(수) 11:38 1차 수강완료
    • jaehyunlee
      완료
    • 박병진
      2020.10.04 완료
    • 콜라
      20200927 완료
    • 김성곤
      20200722 감사합니다!
    • jaehyunlee
      완료
    • 한강
      마진 겹침 현상이라는게 있구나 잘 배웠습니다.
      200604 ^^!
    • sinseiki
      그래서 겹치는 일이 생기면 둘 중 하나는 패딩으로 대체합니다.
    • 와 진짜 어렵네요.. 3번째에서 #empty margin-top의 살구색 표시는 nomal 위쪽으로 50px인데 실제 적용된건 margin 중 최댓값인 100px이군요... 그래도 이렇게 어려운 걸 꼭꼭 씹어 배울 수 있어 행복합니다
    • 무지개반사
      완료
    • Blanc
      2020.01.05
    • raram2
      https://velog.io......ing
      강의 듣고 이것저것 보충해서 정리 해봤습니다
    • 태태
      수강완료
    • 치디우기
      수강 완료 - 19/08*/29
    • 류석현
      수강완료
    • FIRE
      20190729 완료
    • 다나가
      190723 - 수업완료!!
    • Yoonsik Park
      마진겹침 CSS Spec : https://www.w3.org......ins
    • 김주엽
      수업완료
    • 노혜주
      완료
    • lygon
      2019-03-02 완료
    • 한승민
      190216 계속 봐야할것같아여 정리해주셔서 감사합니다!!^^
    • Jung Hwan Sung
      '마진겹침 현상 3'의 5분7초 즈음에 margin-bottom이 100px 이하에서 변경될 때는 움직이지 않습니다
      margin-top의 값과는 관계가 없는 것 같습니다
    • 득구태웅
      감사합니다. 확실한 정리!
    • 퍄퍄퉁
      감사감사!! 3개 다봤어요
    • 숨이
      완료햇습니당
    • Army
      미친듯이 새로 고침 했던 기억이..............
      영상을 좀 더 일찍 봤으면 했던 아쉬움이 남지만 덕분에 지금이라도 원인을 알았습니다 감사해요!
    • Army
      에디터 브라켓 기능입니다 영상 우측에 번개모양 클릭하면 되는걸로 알고 있어요
      대화보기
      • seink56@naver.com
        코딩을 하면서 바로바로 브라우저에 적용되게 하는거 어떻게 하나요..?
      • 김민영
        완료
      • 우엥
        와 스트레스 받고있었는데 진자 박수치고 갑니다........ 존경합니다
      • 스페이스몽키
        감사합니다!
      • 초록색필통
        ㅋㅋㅋㅋ토마토 할때 너무 웃겨욬ㅋㅋㅋㅠㅠㅠ
        이해잘되게 자세히 설명해주셔서 항상 감사합니다♥
      • 멜번리디아
        애고..3번정도 보니.. 헷갈리는 부분이 이해가 되네요. 감사합니다.
      • 훔파닥
        안녕하세요 항상 수고가 많으십니다. 혹시 아톰에서 코드수정시 실시간으로 크롬화면에 적용하는 방법좀 알려주시면 감사하겠습니다.
      • 푸른하늘
        설명을 자세하면서도 간단히 해주시고 css사전으로 예습해서 들으니깐 아주 쉽게 이해되네요
      • 푸른하늘
        11일차 공부 감사합니다
      • 이성준
        으아아아악 무슨 말인지 ㅠ
        겅부 더 하고 다시봐야겠당
      • violet
        며칠 계속 이해하려고 시도하면서 따라해봤는데 알듯말듯하네요. 이고잉님 말씀처럼 css를 쓰다가 혼란스러운 상황이 생겼을 때 딥하게 파보는게 좋을 것 같아요!
      • 오빠는다르다
        감사합니다~!!!!
      • MunBe
        이건 두번봐도 설명하기는 힘드네욬ㅋ;;;;
      • 카라멜팝콘
        깊은마진빡침현상
        대화보기
        • 최동희
          10년 전에 css 학습을 관둔 이유 중 하나였던 게 해결됐네요.
        • 강지후
          마진빡침
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기