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. 슈슈
    투명 아크릴판 두 개를 슬라이딩 한다고 생각하면 될 거 같아요. 미닫이 문 같이요.
    내용물을 붙여두면 아크릴판 두 개가 슬라이딩 해 겹치다가 탁 걸리고, 내용물이 없으면 걸리는게 없으니 그냥 슬라이딩 됩니다? 하나는 아크릴판이 크고(마진이 큰) 다른 하나는 작으면(마진이 작은) 작은 아크릴판의 내용물에 먼저 탁 걸리게 되구요. (마진이 큰 쪽이 적용되 버림)
  2. kdb5869
    24.04.26
  3. 곤비
    0218
  4. 미래도비
    0208
  5. 새콤달콤
    완료
  6. 덕자
    마진겹침
    1. 마진겹침 현상 마진값 중에 더 큰 값이 마진값이 된다.
    2. 부모 마진값의 큰 쪽이 자식 마진값으로 정해진다.
    3. 시각적 요소가 없을 때 마진의 큰 값으로 적용 / 시각적 요소가 있을 때 마진 겹침 일어나지 않음 (총합으로 계산 됨)
  7. DreamBoy
    2023.09.18. CSS - 레이아웃 - 마진겹침 현상 파트를 시작합니다.
  8. 코린이
    첫 프로젝트 할때 그나마 쉬운 화면구현 맡았는데 이것 때문에 한참 찾았던 기억이나네요 ㅎㅎ 요번에 제대로 배워갑니다!
  9. AgainstartJH
    2022년 11월 17일 목요일 학습완료!
  10. 헤밍웨이
    220823 감사합니다
  11. vigorously27
    2022년 7월 21일 목요일 학습완료!
  12. 임앤강
    2022-01-28 수강완료!!
  13. 드림보이
    2021.11.14. 마진겹침 현상 파트 수강완료
  14. 황금아가리
    211006
  15. 황혼이
    깊은 화남=딥빡 ㅋㅋㅋㅋ
    항상 강의 잘보고 있습니다. ㅎㅎ
  16. 전예진
    210729
  17. 두드
    2021.07.22 완료
  18. jeisyoon
    2021.06.22 margin overlap - OK
  19. choi
    완료
  20. width를 퍼센트로 지정시 inline-block으로 주면 패딩이 중첩이 안되네여 ..!
  21. yogg
    이런 현상이 있었군요! ㅠ,ㅠ 실무에서 마주치면 정말 빡칠듯..ㅋ
  22. 마릴곰이
    오와 도대체 왜 이러지 하고 머리 싸매던 적이 있었는데 이 이유였군요! 이번 영상도 감사합니다ㅎㅎ

    궁금해서 이유를 찾아보니, margin을 "이 요소를 10px만큼 움직여주세요"라기보다, "이 요소는 다른 *보이는* 인접한 요소와 10px 떨어져 있게 해주세요"라고 생각하면 쉽다고 하네요!
    (선생님의 첫번째 동영상 설명과 일맥상통합니다.)

    더 궁금하신 분들은 - https://stackoverflow.com......890
  23. 마진이 제대로 동작하지 않을때 볼것
  24. 오광석
    굉장히 어렵고, 그리고 중요하지 않은 ㅋㅋㅋ
    개념만 이해하고 넘어갑니다. 감사합니다.
  25. 임태경
    완료했어요 감사해요
  26. 스마일가이
    2021.01.26 완료 감사합니다
  27. datsciseol
    20210116
  28. malbong
    1. 위아래(형제) 엘리먼트 중에 margin값이 큰 값을 취함

    2. 부모자식 관계중에

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

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

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

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

    - 엘리먼트가 시각적인 요소가 있다면 위의 1과 똑같은 마진겹침
  29. 주니어개발자
    베리 나이스 땡큐
    대화보기
    • 201214 마진겹침현상 3은..진짜 어렵네요. 나중에 다시 보겠습니다
    • Seunghyuk Rodrigo Kim
      감사합니다.
    • 만듀
      20201109
    • 켄드릭
      2020년 11월 04일(수) 11:38 1차 수강완료
    • jaehyunlee
      완료
    • 박병진
      2020.10.04 완료
    • 콜라
      20200927 완료
    • 김성곤
      20200722 감사합니다!
    • jaehyunlee
      완료
    • 한강
      마진 겹침 현상이라는게 있구나 잘 배웠습니다.
      200604 ^^!
    • sinseiki
      그래서 겹치는 일이 생기면 둘 중 하나는 패딩으로 대체합니다.
    • laqah
      와 진짜 어렵네요.. 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
    버전 관리
    egoing@gmail.com
    현재 버전
    선택 버전
    graphittie 자세히 보기